/* Crash Arena — estilos de cada tela */

html:has(#dlg-saque:modal) { overflow: hidden; }
#dlg-saque::backdrop { position: fixed; inset: 0; }

/* ---------- Entrar ---------- */
body.pg-entrar main { min-height: 100vh; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6%; align-items: center; padding: 58px 6% 56px;
  background: linear-gradient(90deg, #130d2240 0%, #140d2200 40%, #130c2300 70%, #130c2340 100%), url(../img/plataforma/fundo-entrar.jpg) center / cover no-repeat, #130c23; }
.hero h1 { font: 800 clamp(48px, 5.6vw, 92px)/1 var(--display); letter-spacing: .5px; margin: 0; color: #fff;
  text-shadow: 0 3px 0 #1a0f0a, 0 4px 18px #000c; }
.hero h1 em { font-style: normal; text-shadow: none; /* a sombra cobriria o degradê; quem faz a sombra é o filter */ background: linear-gradient(#ffb43c, #ff7a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #1a0f0a) drop-shadow(0 4px 12px #0009); }
/* logo no canto superior esquerdo; o "Entre na ilha" fica no meio da coluna da esquerda */
.logo-hero { position: absolute; top: 20px; left: 3%; display: block; width: clamp(200px, 17vw, 300px); height: auto; filter: drop-shadow(0 6px 14px #0008); }
body.pg-entrar .panel { justify-self: end; }
/* login inteiro numa tela, sem rolagem: painel mais compacto */
body.pg-entrar main { height: 100vh; height: 100dvh; min-height: 0; padding-top: 24px; padding-bottom: 24px; }
body.pg-entrar .panel { padding: 22px 30px; max-height: 100%; overflow-y: auto; scrollbar-width: none; } /* em tela muito baixa ainda rola dentro do painel, mas sem barra */
body.pg-entrar .panel::-webkit-scrollbar { display: none; }
body.pg-entrar .panel h2 { margin-top: 0; }
body.pg-entrar .subtitle { margin-bottom: 12px; }
body.pg-entrar .tabs { margin-bottom: 8px; }
body.pg-entrar label { margin: 12px 0 6px; }
body.pg-entrar input { height: 44px; }
body.pg-entrar .auth-icon { display: block; width: 16px; height: 16px; filter: invert(1); opacity: .58; }
body.pg-entrar .field > .auth-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
body.pg-entrar .eye { top: 50%; transform: translateY(-50%); padding: 6px; }
body.pg-entrar .options { margin: 8px 0 14px; }
body.pg-entrar .note { margin: 14px 0 0; padding: 9px 12px; }
body.pg-entrar .check { margin: 14px 0 14px; height: auto; line-height: 1.2; }
body.pg-entrar .erro:empty { min-height: 0; margin: 0; }
/* telas mais baixas: tudo um pouco mais junto, para o "Criar conta" caber sem barra de rolagem */
@media (min-width: 901px) and (max-height: 760px) {
  body.pg-entrar .panel h2 { font-size: 30px; margin-bottom: 4px; }
  body.pg-entrar .subtitle { margin-bottom: 10px; }
  body.pg-entrar label { margin: 9px 0 5px; }
  body.pg-entrar input { height: 40px; }
  body.pg-entrar .tabs button { padding: 9px 0; }
  body.pg-entrar .primary { padding: 13px; }
  body.pg-entrar .check { margin: 12px 0; }
}

/* ---------- páginas internas (carteira, conta, resultado) ---------- */
body.pg-interna main { display: grid; place-items: start center;
  background: url(../img/plataforma/fundo-conta.jpg) center / cover no-repeat, #130c23; }
body.pg-carteira main { background: url(../img/plataforma/fundo-carteira.jpg) center / cover no-repeat, #130c23; }
body.pg-interna:not(:has(#topo)) main { min-height: 100vh; } /* confirmar e-mail / nova senha não têm cabeçalho */
body.pg-carteira .panel { max-width: 520px; background: #211332dd; }
.big-balance { font: 800 55px var(--display); color: #ffc34f; padding: 10px 0 20px; }
.big-balance small { font: 500 12px Inter, sans-serif; color: #b6a7c5; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 18px; }
.payment-methods button { position: relative; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid #ffffff20; background: #170e26; color: #b8a8c9; }
.payment-methods button.selected { border-color: #ffb84e; color: #ffd088; background: #ffb0390d; }
.payment-methods button.selected::after { content: '✓'; position: absolute; right: 12px; top: 14px; font-size: 11px; }
.payment-methods strong { display: block; font-size: 12px; margin-top: 7px; }
.payment-methods small { display: block; font-size: 9px; margin-top: 5px; color: #a796b9; }
.payment-icon svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.payment-summary { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; gap: 12px; }
.payment-summary strong { font: 800 35px var(--display); }
.payment-summary span { font-size: 12px; color: #ffc063; }

/* lista de movimentos / partidas */
.lista { margin: 26px 0 0; }
.lista h3 { font: 800 22px var(--display); margin: 0 0 10px; }
.lista ol { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.lista li small { display: block; color: #8e809e; font-size: 10px; margin-top: 3px; }
.lista li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista .vazio { color: #8e809e; font-size: 12px; padding: 10px 2px; }

/* ---------- Lobby (modo Solo) ---------- */
/* como na tela de referência: uma coluna no meio (painel do jogo e, embaixo, as últimas partidas) */
body.pg-lobby main { display: grid; grid-template-columns: minmax(0, 400px); justify-content: center; gap: 14px; align-items: start; padding: 24px 16px;
  background: url(../img/plataforma/fundo-lobby.jpg) center / cover no-repeat, var(--bg-2); }
.lobby-intro { display: none; }
.lobby-intro h1 { font: 800 clamp(34px, 3vw, 56px)/1.05 var(--display); margin: 0 0 10px; text-shadow: 0 2px 16px #10091d; }
.lobby-intro p { color: #e4dcef; font-size: 14px; line-height: 1.7; max-width: 520px; text-shadow: 0 2px 10px #000; margin: 0; }
.match-panel { background: #180e27; border: 1px solid #ffffff20; border-radius: 20px; padding: 24px; box-shadow: 0 16px 48px #10081938; animation: entrar .35s ease-out; }
.season { font-size: 10px; letter-spacing: 2px; color: #aa91c0; }
.match-panel h3 { font: 800 34px/1.1 var(--display); margin: 10px 0; }
.match-panel > p { color: #ac9cbd; font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.match-detail { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0; font-size: 13px; }
.match-detail > span { font-size: 10px; letter-spacing: .7px; color: #92829f; text-transform: uppercase; }
.match-detail strong { font-weight: 600; color: #d5c8e1; text-align: right; }
.stake { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.stake .field > span { top: 13px; color: #ffc34f; }
.stake-info { display: flex; justify-content: space-between; font-size: 11px; color: #a699b6; margin-top: 8px; }
.match-panel .primary { margin-top: 16px; }
.lobby-history { grid-column: 1; background: #180e27; border: 1px solid #ffffff16; border-radius: 18px; padding: 20px 22px; }
.lobby-history .lista { margin: 0; }
.lobby-history .lista ol { max-height: 230px; }

/* ---------- Resultado ---------- */
.resultado-linhas { margin: 6px 0 14px; }
.resultado-linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.resultado-linhas dt { color: #c9bcd8; }
.resultado-linhas dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.saldo-final { display: flex; justify-content: space-between; align-items: baseline; border-radius: 12px; padding: 12px 16px; font: 900 26px var(--display); letter-spacing: .02em; margin: 14px 0; }
.saldo-final.gain { background: rgba(60,180,90,.2); border: 2px solid #4fbf6f; }
.saldo-final.loss { background: rgba(220,60,50,.18); border: 2px solid #d9534a; }
.saldo-final.even { background: rgba(255,255,255,.06); border: 2px solid #c99a4a; color: #fff4dc; }
.acoes { display: grid; gap: 10px; margin-top: 18px; }

@media (max-width: 900px) {
  body.pg-entrar main { grid-template-columns: 1fr; gap: 25px; padding: 35px 6%; height: auto; min-height: 100vh;
    background: url(../img/plataforma/fundo-entrar-mobile.png) 60% center / cover no-repeat, #130c23; }
  body.pg-entrar .panel { position: relative; justify-self: center; max-width: 470px; background: #21152eee;
    max-height: none; overflow: visible; margin-top: 126px; padding-top: 38px; }
  body.pg-entrar .panel::before { content: ""; position: absolute; bottom: calc(100% - 27px); left: 50%;
    width: 190px; aspect-ratio: 1312 / 1199; transform: translateX(-50%); pointer-events: none;
    background: url(../img/plataforma/crash-auth-mobile.png) center / contain no-repeat; }
  .hero h1 { display: none; }
  .logo-hero { position: static; margin: 0 auto; width: min(260px, 70vw); }
  body.pg-lobby main { grid-template-columns: 1fr; background-size: auto 100%; }
  .lobby-history { grid-column: 1; }
}

/* o fundo fica do tamanho da janela (não estica com a página comprida); só no computador, o celular não suporta bem */
@media (min-width: 901px) {
  body.pg-interna main, body.pg-carteira main, body.pg-lobby main { background-attachment: fixed; }
}