/*
 * game-shell.css — A página de um game original apresentada em tela cheia no
 * mobile.
 *
 * O QUE RESOLVE
 * Medido em 390x844 (um dos aparelhos MAIORES): a navbar come 60px e o menu
 * inferior ~65px, sobrando 719px de área útil. O conteúdo dos jogos vai de
 * 730px (balon) a 1022px (chicken) — ou seja, NENHUM cabia, e o botão de
 * apostar ficava abaixo da dobra. Sem navbar e sem menu, a área útil sobe
 * para ~800px.
 *
 * O QUE NÃO É
 * Não é um recorte do jogo. A página inteira continua ali — jogo, card de
 * informações, apostas ao vivo — e continua rolando normalmente. O jogo NUNCA
 * é preso numa caixa menor que ele: isso seria cortá-lo, não ajustá-lo. O que
 * muda é só a moldura: navbar e menu inferior saem e entra uma barra fina com
 * a seta de voltar.
 *
 * COR: só var(--c-*). CSS bruto não passa pelo theme-overrides.css, então
 * qualquer hex daqui ficaria fora do tema quando o .env mudasse.
 */

/* ── Caixa do iframe ─────────────────────────────────────────────────────
   É a regra que estava copiada nos 12 wrappers de game. Fica presa a
   `.game-shell` de propósito: `.game-iframe-wrapper` também é usada pelo
   poker e pelos embedded do crash/slide, que declaram altura própria e não
   podem herdar daqui.

   A altura de verdade é inline, posta pelo game-shell.js a cada IFRAME_RESIZE.
   O que está aqui é só o tamanho inicial, até o jogo dizer o dele. */

.game-shell .game-iframe-wrapper {
    width: 100%;
    background-color: var(--c-background);
    overflow: hidden;
}

@media (min-width: 768px) {
    .game-shell .game-iframe-wrapper {
        height: calc(78vh - 70px);
    }
}

@media (max-width: 767.98px) {
    .game-shell .game-iframe-wrapper {
        min-height: calc(100vh - 70px);
        height: auto;
    }
}

/* A barra só existe no modo tela cheia. No desktop e fora dele o markup fica
   no DOM, mas invisível — assim o mesmo blade serve aos dois. */
.game-shell-bar {
    display: none;
}

@media (max-width: 767.98px) {

    /* Navbar e menu inferior continuam no DOM — são data-turbo-permanent e
       carregam estado que não dá para recriar. Aqui só saem de vista. */
    html.game-fs #global-navbar,
    html.game-fs #mobile-bottom-nav {
        display: none !important;
    }

    /* O container do layout reserva 60px para a navbar fixa. Sem navbar, esse
       espaço viraria uma faixa vazia no topo. */
    html.game-fs .game-fs-wrap {
        padding-top: 0 !important;
    }

    /* Lugar da barra, que é fixa e por isso não ocupa espaço sozinha. */
    html.game-fs #main-content {
        padding-top: 44px;
    }

    html.game-fs .game-shell-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;   /* acima do conteúdo, abaixo dos sheets (9990) */
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 10px;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: content-box;
        background: var(--c-surface-2);
        /* Divisória por box-shadow, não border: não entra na conta da altura. */
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
    }
}

/* ── Peças da barra ──────────────────────────────────────────────────── */

.game-shell-back {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--c-background);
    color: #8f95a3;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.game-shell-back:active {
    background: var(--c-surface);
    color: #fff;
}

.game-shell-name {
    flex: 1;
    min-width: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lado direito: pastilha de saldo (logado) ou botão de entrar (visitante).
   Mesma caixa nos dois, para a barra não mudar de altura entre os estados. */
.game-shell-action {
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.game-shell-action--login {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.game-shell-action--wallet {
    background: var(--c-background);
    color: #eceff1;
    /* O odômetro do saldo rola dígito a dígito; sem tabular-nums a pastilha
       muda de largura a cada rolagem. */
    font-variant-numeric: tabular-nums;
}

.game-shell-coin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 9999px;
    object-fit: cover;
}

.game-shell-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: 15px;
    font-weight: 700;
}