/* ===================== hall no layout do jogo original ===================== */
/* Barra de cima, fileira de cards grandes e barra de icones embaixo — as artes
   sao as do RallyAces (hallcanvas/*). */

#telaHall.original { display: none; }
#telaHall.original.ativa { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.hall-fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hall-camada { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

/* ------------------------------------------------------------- barra de cima */
.hall-topo {
  display: flex; align-items: center; gap: 14px; padding: 9px 18px;
  background: linear-gradient(180deg, rgba(12,6,26,.94), rgba(20,10,40,.72));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hall-topo .eu { display: flex; align-items: center; gap: 10px; }
.hall-topo .foto { position: relative; width: 54px; height: 54px; }
.hall-topo .foto img.av { position: absolute; inset: 5px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hall-topo .foto img.moldura { position: absolute; inset: 0; width: 54px; height: 54px; }
.hall-topo .quem .nome { font-size: 15px; font-weight: 700; }
.hall-topo .quem .lv { font-size: 11px; color: var(--dourado); letter-spacing: .5px; }

/* carteiras: fichas e moedas, cada uma com o botao + */
.carteira {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  background: rgba(6,3,16,.72); border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px; font-size: 14px; font-weight: 700;
}
.carteira .valor { min-width: 66px; text-align: right; }
.carteira.fichas .valor { color: #ff9d9d; }
.carteira.moedas .valor { color: var(--dourado); }
.carteira .mais {
  width: 24px; height: 24px; line-height: 22px; text-align: center; font-size: 15px; font-weight: 800;
  color: #fff; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #a55bd8, #7a35b0);
}
.hall-topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hall-topo .icone-topo {
  width: 42px; height: 42px; display: grid; place-items: center; font-size: 19px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; color: var(--texto); transition: .13s;
}
.hall-topo .icone-topo:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.hall-topo .icone-topo.banco { position: relative; }
.hall-topo .icone-topo .selo {
  position: absolute; top: -6px; right: -6px; padding: 1px 5px; font-size: 9px; font-weight: 800;
  color: #fff; background: #d23b3b; border-radius: 6px;
}

/* --------------------------------------------------------------- cards */
.hall-cards {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 18px 22px; overflow-x: auto;
}
.card-hall {
  position: relative; width: 210px; height: 340px; flex: 0 0 auto;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card-hall:hover { transform: translateY(-6px); border-color: var(--dourado); box-shadow: 0 20px 44px rgba(0,0,0,.7); }
.card-hall img.arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-hall .veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%);
}
.card-hall .rotulo {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
.card-hall .jackpot {
  position: absolute; left: 12px; right: 12px; bottom: 44px; text-align: center;
  padding: 5px 0; font-size: 15px; font-weight: 800; color: #ffe9a8;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,215,106,.45); border-radius: 8px;
  text-shadow: 0 0 10px rgba(255,215,106,.6);
}
.card-hall.travado { filter: grayscale(.6) brightness(.65); }
.card-hall .cadeado {
  position: absolute; top: 10px; left: 10px; width: 40px; height: 40px;
  object-fit: contain; z-index: 4;
}

/* A arte principal de cada card, por cima do fundo: o 777, o troféu, o ás.
   No jogo elas são peças soltas sobre o fundo, não uma imagem única. */
.card-hall .frente {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  width: 78%; max-height: 52%; object-fit: contain; z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.card-hall .enfeite {
  position: absolute; right: -6%; top: 34%;
  width: 42%; object-fit: contain; z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
/* leque de cartas (Cartas de Casino) */
.card-hall .leque {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  width: 150px; height: 130px; z-index: 2;
}
.card-hall .leque img {
  position: absolute; left: 50%; top: 50%; width: 64px;
  border-radius: 5px; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .6));
  transition: rotate .25s ease, translate .25s ease;
}
.card-hall .leque .c1 { translate: -84% -50%; rotate: -20deg; }
.card-hall .leque .c2 { translate: -50% -54%; rotate: 0deg; z-index: 2; }
.card-hall .leque .c3 { translate: -16% -50%; rotate: 20deg; }
.card-hall:hover .leque .c1 { translate: -102% -50%; rotate: -30deg; }
.card-hall:hover .leque .c3 { translate: 2% -50%; rotate: 30deg; }

/* título desenhado (ex: ROOKIE'S RICHES) no lugar do texto */
.card-hall .titulo-arte {
  position: absolute; left: 8%; right: 8%; bottom: 12px;
  width: 84%; object-fit: contain; z-index: 4;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}
.card-hall .jackpot { z-index: 4; }
.card-hall .rotulo { z-index: 4; }
.card-hall .tarja-novo {
  position: absolute; top: 12px; right: -26px; transform: rotate(38deg);
  padding: 3px 30px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  color: #fff; background: linear-gradient(180deg, #e04a3a, #a72a1e);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* card central: jogar ja + mesas */
.card-hall.central { width: 250px; background: linear-gradient(180deg, #2a1550, #160a2e); }
/* a ficha vermelha com o play, e os quatro ases saindo de trás dela */
.card-hall.central .fichao {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 190px; height: 190px;
}
/* a ficha fica na frente e centrada; height:auto para não achatar */
.card-hall.central .fichao .ficha {
  position: absolute; left: 50%; top: 54%; translate: -50% -50%;
  width: 118px; height: auto; z-index: 3;
  filter: drop-shadow(0 6px 18px rgba(255, 70, 70, .5));
}
/* os ases saem por trás da ficha, nos quatro cantos */
.card-hall.central .fichao .as {
  position: absolute; width: 52px; height: auto; z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  transition: translate .3s ease, rotate .3s ease;
}
.card-hall.central .fichao .a1 { left: -2%;  top: 4%;   rotate: -26deg; }
.card-hall.central .fichao .a2 { right: -2%; top: 2%;   rotate: 22deg; }
.card-hall.central .fichao .a3 { left: 6%;   top: 44%;  rotate: -12deg; }
.card-hall.central .fichao .a4 { right: 4%;  top: 46%;  rotate: 32deg; }
/* ao passar o mouse as cartas se abrem, como no original */
.card-hall.central:hover .fichao .a1 { translate: -12px -10px; rotate: -36deg; }
.card-hall.central:hover .fichao .a2 { translate: 12px -10px;  rotate: 32deg; }
.card-hall.central:hover .fichao .a3 { translate: -10px 8px;   rotate: -20deg; }
.card-hall.central:hover .fichao .a4 { translate: 10px 8px;    rotate: 42deg; }
.card-hall.central .botoes { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 9px; }
.card-hall.central .botoes button {
  padding: 13px; font-size: 16px; font-weight: 800; color: #fff; border: 0; border-radius: 11px;
  letter-spacing: .5px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  /* as artes dos botões vêm do jogo; o gradiente fica de reserva por baixo */
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
}
.card-hall.central .jogar { background-color: #3f9d34; }
.card-hall.central .mesas { background-color: #2f7fbe; }
.card-hall.central .botoes button:active { transform: translateY(1px); }

/* ------------------------------------------------------- barra de baixo */
.hall-baixo {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; min-height: 74px;
  background: linear-gradient(180deg, rgba(14,7,30,.72), rgba(8,4,18,.96));
  border-top: 1px solid rgba(255,255,255,.08);
}
.hall-baixo .icone {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center;
  font-size: 21px; color: var(--texto);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; transition: .13s;
}
.hall-baixo .icone:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
/* ícone desenhado do jogo dentro do botão (os do dump são brancos, em traço) */
.hall-baixo .icone .ic { width: 26px; height: 26px; object-fit: contain; opacity: .92; }
.hall-baixo .icone:hover .ic { opacity: 1; }
.hall-baixo .icone .pino {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; line-height: 18px;
  font-size: 10.5px; font-weight: 800; color: #2a1600; border-radius: 9px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2));
}
.hall-baixo .direita { margin-left: auto; display: flex; gap: 10px; }

/* O botão flutuante de amigos é a reserva de quem não tem ícone próprio. O hall
   tem (#btnAmigos), e na mesa ele cairia justamente em cima do campo de chat. */
body:has(#telaMesa.ativa) .am-botao,
body:has(#telaEntrar.ativa) .am-botao { display: none; }

/* os ícones do topo (VIP, baú, correio) também acendem pino */
.hall-topo .icone-topo { position: relative; }
.hall-topo .icone-topo .pino {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; line-height: 16px;
  font-size: 10px; font-weight: 800; color: #fff; border-radius: 8px;
  background: linear-gradient(180deg, #ff6b6b, #d32f2f);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
}
.hall-topo .icone-topo .pino[hidden] { display: none; }

/* fichas gratis no centro, com contagem */
.fichas-gratis {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 24px; cursor: pointer;
  background: radial-gradient(circle at 50% 0%, rgba(160,60,190,.75), rgba(60,20,90,.9));
  border: 2px solid rgba(255,215,106,.5); border-radius: 16px 16px 0 0;
}
.fichas-gratis .tempo { font-size: 13px; font-weight: 700; color: #fff; }
.fichas-gratis .rot { font-size: 10.5px; letter-spacing: .8px; color: var(--dourado); text-transform: uppercase; }
.fichas-gratis.pronto { animation: pulsaGratis 1.5s ease-in-out infinite; }
@keyframes pulsaGratis {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,106,.5); }
  50% { box-shadow: 0 0 22px 4px rgba(255,215,106,.35); }
}

/* balao de aviso do original ("Baú extra, por tempo limitado!") */
.balao-hall {
  position: absolute; left: 130px; bottom: 86px; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: #eaf4ff;
  background: linear-gradient(180deg, #1d4f8a, #12325c);
  border: 1px solid #4b93d8; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.balao-hall::after {
  content: ''; position: absolute; left: 28px; bottom: -8px;
  border: 8px solid transparent; border-top-color: #12325c; border-bottom: 0;
}

/* seletor de idioma */
.idioma-menu {
  position: absolute; right: 18px; top: 60px; z-index: 40; display: none;
  max-height: 60vh; overflow-y: auto; padding: 6px;
  background: rgba(16,9,34,.98); border: 1px solid var(--carta-borda);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.7);
}
.idioma-menu.aberto { display: block; }
.idioma-menu button {
  display: block; width: 190px; padding: 8px 12px; text-align: left; font-size: 13px;
  color: var(--texto2); background: none; border: 0; border-radius: 8px;
}
.idioma-menu button:hover { background: rgba(255,255,255,.1); color: #fff; }
.idioma-menu button.atual { color: var(--dourado); font-weight: 700; }

@media (max-width: 1100px) {
  .card-hall { width: 168px; height: 280px; }
  .card-hall.central { width: 200px; }
  .balao-hall { display: none; }
}

/* ===================== paineis: loja, perfil, amigos, ranking ===================== */
.carregando { padding: 30px; text-align: center; color: var(--texto3); font-size: 13px; }

.grade-loja { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 13px; }
.carta-loja {
  position: relative; padding: 14px 12px 13px; text-align: center;
  background: linear-gradient(180deg, rgba(56,34,102,.6), rgba(28,17,54,.82));
  border: 1px solid var(--carta-borda); border-radius: 14px; transition: .14s;
}
.carta-loja:hover { transform: translateY(-3px); border-color: #a97bff; }
.carta-loja.destaque { border-color: var(--dourado); box-shadow: 0 0 0 1px rgba(255,215,106,.25); }
.carta-loja .arte { height: 78px; display: grid; place-items: center; font-size: 34px; margin-bottom: 8px; }
.carta-loja .arte img { max-width: 100%; max-height: 78px; object-fit: contain; }
.carta-loja .nome { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.carta-loja .detalhe { font-size: 11px; color: var(--texto2); min-height: 28px; line-height: 1.35; }
.carta-loja button {
  width: 100%; margin-top: 9px; padding: 9px; font-size: 13px; font-weight: 700;
  color: #2a1600; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2));
}
.carta-loja button:disabled { background: rgba(255,255,255,.09); color: var(--texto3); cursor: default; }
.carta-loja .fita {
  position: absolute; top: 8px; right: -22px; transform: rotate(38deg);
  padding: 2px 26px; font-size: 9.5px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #e04a3a, #a72a1e);
}

/* perfil */
.perfil-cartao {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  background: linear-gradient(180deg, rgba(56,34,102,.55), rgba(28,17,54,.8));
  border: 1px solid var(--carta-borda); border-radius: 16px;
}
.perfil-cartao .foto-grande { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.perfil-cartao .foto-grande .av { position: absolute; inset: 9px; width: 86px; height: 86px; border-radius: 50%; object-fit: cover; }
.perfil-cartao .foto-grande .moldura { position: absolute; inset: 0; width: 104px; height: 104px; }
.perfil-cartao .dados .nome { font-size: 21px; font-weight: 700; }
.perfil-cartao .dados .linha { font-size: 13px; color: var(--texto2); margin-top: 4px; }
.perfil-cartao .editar {
  margin-top: 11px; padding: 8px 15px; font-size: 12.5px; color: var(--texto);
  background: rgba(255,255,255,.08); border: 1px solid var(--carta-borda); border-radius: 9px;
}
.grade-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; margin-top: 16px; }
.grade-stats .stat {
  padding: 14px; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
}
.grade-stats .stat .v { font-size: 19px; font-weight: 700; color: var(--dourado); }
.grade-stats .stat .r { font-size: 11px; color: var(--texto2); margin-top: 3px; }

.grade-avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.av-op {
  padding: 6px; background: rgba(255,255,255,.06);
  border: 1px solid var(--carta-borda); border-radius: 12px; transition: .13s;
}
.av-op:hover { border-color: var(--dourado); transform: translateY(-2px); }
.av-op img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }

/* ============================ POKER SLOT ============================ */
#telaSlot.ativa { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#slotCorpo {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
  background: radial-gradient(900px 600px at 50% 30%, #35135e 0%, #120726 70%);
}
.slot-topo { text-align: center; }
.slot-jackpot {
  padding: 9px 34px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(90,40,140,.7), rgba(40,15,70,.9));
  border: 2px solid rgba(255,215,106,.5);
}
.slot-jackpot .rot { font-size: 11px; letter-spacing: 3px; color: var(--dourado2); }
.slot-jackpot .valor {
  font-size: 30px; font-weight: 800; color: #ffe9a8;
  text-shadow: 0 0 18px rgba(255,215,106,.65);
}
.slot-maquina {
  padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,10,40,.9), rgba(10,5,22,.95));
  border: 2px solid rgba(190,150,255,.35); box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.rolos { display: flex; gap: 7px; }
.rolo { display: flex; flex-direction: column; gap: 7px; }
.casa {
  width: 92px; height: 92px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px; transition: .16s;
}
.casa img { max-width: 76px; max-height: 76px; object-fit: contain; }
.casa.acesa {
  background: rgba(255,215,106,.18); border-color: var(--dourado);
  box-shadow: 0 0 16px rgba(255,215,106,.5); transform: scale(1.04);
}
.slot-painel {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: rgba(10,5,22,.8); border: 1px solid var(--carta-borda); border-radius: 14px;
}
.slot-painel .campo { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.slot-painel .rot { font-size: 10px; letter-spacing: 1.6px; color: var(--texto3); }
.slot-painel select {
  padding: 7px 11px; font-size: 14px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid var(--carta-borda); border-radius: 9px;
}
.slot-painel .campo.total .valor { font-size: 17px; font-weight: 800; color: var(--dourado); }
.slot-painel .valor.ganho { color: var(--verde); }
.slot-girar {
  padding: 15px 40px; font-size: 18px; font-weight: 800; letter-spacing: 1px;
  color: #2a1600; border: 0; border-radius: 13px;
  background: linear-gradient(180deg, var(--dourado), var(--dourado2));
  box-shadow: 0 8px 24px rgba(240,170,60,.4);
}
.slot-girar:active { transform: translateY(2px); }
.slot-girar:disabled { opacity: .5; cursor: default; }
.slot-msg { min-height: 24px; font-size: 17px; font-weight: 700; color: var(--dourado); text-shadow: 0 2px 10px #000; }