/* =========================================
   1. AVISOS DE ORIENTAÇÃO (PORTRAIT)
   ========================================= */
#portrait-warning,
#orientation-warning {
    display: none;
    position: fixed;
    flex-direction: column;
    gap: 20px;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.animacao-girar {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* A "carcaça" do celular */
.phone-icon {
    width: 44px;
    height: 76px;
    border: 4px solid #ffffff;
    border-radius: 8px;
    position: relative;
    /* Chama a animação que dura 2.5s e repete para sempre */
    animation: rotacionarCelular 2.5s ease-in-out infinite;
}

/* A "tela" brilhante do celular */
.phone-icon::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 4px;
    right: 4px;
    bottom: 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* O "botão home" (para dar um charme realista) */
.phone-icon::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

/* Keyframes: A coreografia do movimento */
@keyframes rotacionarCelular {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    15% {
        transform: rotate(0deg);
        opacity: 1;
    }

    /* Surge em pé */
    40% {
        transform: rotate(-90deg);
        opacity: 1;
    }

    /* Gira rapidamente */
    70% {
        transform: rotate(-90deg);
        opacity: 1;
    }

    /* Mantém deitado para o usuário entender */
    90% {
        transform: rotate(-90deg);
        opacity: 0;
    }

    /* Desaparece suavemente */
    100% {
        transform: rotate(0deg);
        opacity: 0;
    }

    /* Reseta invisível */
}

/* Ajuste no texto para ficar mais bonito */
#orientation-warning p {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    max-width: 80%;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

/* Só mostra se for Mobile AND estiver com o celular em pé (Portrait) */
@media screen and (max-width: 900px) and (orientation: portrait) {

    body.in-game #orientation-warning,
    #portrait-warning {
        display: flex;
    }

    /* Esconde o tabuleiro para forçar o usuário a virar a tela */
    .game-board,
    .game-board-spider {
        display: none !important;
    }
}

/* =========================================
   2. COMPORTAMENTO EM TELEMÓVEIS (Até 900px)
   ========================================= */
@media screen and (max-width: 900px) {

    /* Esconde o menu normal de computador COMPLETAMENTE no telemóvel */
    #top-menu,
    .menu-superior {
        display: none !important;
    }

    /* Mostra o botão flutuante (hambúrguer) sempre que estiver no celular */
    .floating-btn {
        display: block !important;
    }
}

/* =========================================
   3. COMPORTAMENTO EM COMPUTADORES (Acima de 900px)
   ========================================= */
@media screen and (min-width: 901px) {

    /* Garante que o menu normal aparece no ecrã grande */
    #top-menu,
    .menu-superior {
        display: flex !important;
    }

    /* Oculta o botão flutuante, pois não é necessário com mouse e teclado */
    .floating-btn,
    .mobile-only {
        display: none !important;
    }
}

/* =========================================
   4. ESTILOS DO BOTÃO FLUTUANTE
   ========================================= */
.floating-btn {
    display: none;
    /* Escondido por padrão, as Media Queries acima que ativam */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* =========================================
   5. SIDEBAR MENU (Deslizante para Mobile)
   ========================================= */
.sidebar-mobile {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;

    position: fixed;
    top: 0;
    right: -300px;
    /* Fica escondido FORA da tela à direita */
    width: 250px;
    height: 100vh;
    background: #1a1a1a;
    color: #fff;
    z-index: 2000;

    /* Animação suave ao abrir */
    transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.8);
    overflow-y: auto;
    /* Garante a rolagem */
    -webkit-overflow-scrolling: touch;
    /* Suavidade no iOS */
    padding-bottom: 50px;
}

/* A classe que o JavaScript adiciona faz o menu deslizar para dentro da tela */
body.sidebar-open .sidebar-mobile {
    right: 0;
}

#close-sidebar-btn {
    align-self: flex-end;
    background: #ff4444;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.sidebar-mobile button,
.sidebar-mobile select {
    width: 100%;
    padding: 12px;
    margin-bottom: 5px;
}

#reset-game-btn-mobile,
#back-menu-btn-mobile {
    display: none !important;
}

/* Mostra apenas quando o body tiver a classe in-game (ou seja, quando um jogo está ativo) */
body.in-game #reset-game-btn-mobile,
body.in-game #back-menu-btn-mobile {
    display: block !important;
    width: 100%;
    /* Garante que ocupam a largura da sidebar */
}

/* =========================================
   6. ESCALONAMENTO NATIVO (S24 Plus e Mobile)
   ========================================= */
@media screen and (max-width: 950px) and (orientation: landscape) {

    /* 1. O SEGREDO: Redimensionar as variáveis raiz */
    :root {
        --card-width: 48px !important;
        /* Estreito o suficiente para caber 10 colunas no Spider */
        --card-height: 70px !important;
        --cascade-offset: 18px !important;
        /* Cartas ficam mais sobrepostas para caberem na vertical */
    }

    /* 2. Remover o transform que quebrava o touch */
    .game-board,
    .game-board-spider {
        transform: none !important;
        width: 100vw !important;
        margin-left: 0 !important;
        min-height: 100vh !important;
        padding: 5px;
    }

    /* 3. Garante que as áreas do jogo obedeçam à nova variável */
    .stock,
    .waste,
    .foundation,
    .free-slot,
    .card-slot {
        min-width: var(--card-width) !important;
        min-height: var(--card-height) !important;
    }

    /* 4. Colunas com espaço vertical dinâmico */
    .column {
        min-width: var(--card-width) !important;
        min-height: 60vh !important;
    }

    /* 5. Espalhar as colunas na tela perfeitamente */
    .tableau,
    .spider-tableau {
        gap: 2px !important;
        padding: 0 5px;
        justify-content: space-evenly;
        margin-top: -30px !important;
    }
}

/* =========================================
       7. CORREÇÃO DA PILHAGEM INVERTIDA (MOBILE)
       ========================================= */

/* Anula o -100px hardcoded do JavaScript e aplica a escala mobile */
.column .card:not(:first-child) {
    /* A carta tem 70px de altura. Margem de -52px deixa exatos 18px visíveis! */
    margin-top: -52px !important;
}

/* Refinamento de mestre: Cartas viradas para baixo ficam mais juntinhas */
.column .card.face-down:not(:first-child) {
    margin-top: -62px !important;
    /* Deixa apenas 8px visíveis */
}

/* Garante que a carta base da coluna nunca seja puxada para fora da mesa */
.column .card:first-child {
    margin-top: 0 !important;
}

/* =========================================
   8. BLOQUEIO DE INTERAÇÕES NATIVAS (MOBILE)
   ========================================= */
@media screen and (max-width: 950px) {
    .card {
        /* Impede o navegador de mostrar menus de contexto (clique longo) */
        -webkit-touch-callout: none !important;

        /* Impede a seleção de texto sobre a carta */
        -webkit-user-select: none !important;
        user-select: none !important;

        /* Impede o zoom ao dar dois toques rápidos na carta */
        touch-action: manipulation !important;
    }

    /* Garante que o toque inicial na carta seja tratado como movimento imediato */
    .card-slot,
    .column {
        touch-action: none !important;
    }


}

/* =========================================
   9. AJUSTES ESPECÍFICOS: CANASTRA E TRUCO
   ========================================= */
@media screen and (max-width: 950px) and (orientation: landscape) {

    /* =========================================
       CANASTRA
       ========================================= */
    .canastra-board {
        justify-content: space-between !important;
        padding: 2px !important;
        height: 100vh;
        overflow: hidden;
        /* Previne scroll vertical acidental */
    }

    .cpu-area h3,
    .player-area h3 {
        display: none !important;
    }

    /* 1. Encolhe a mão da IA drasticamente (não precisamos ver os detalhes das costas das cartas) */
    .canastra-board .cpu-area {
        transform: scale(0.6);
        transform-origin: top center;
        margin-bottom: -20px;
        /* Puxa a mesa para cima, recuperando espaço */
    }

    /* 2. Área da Mesa Central (Monte, Lixo e Jogos Baixados) */
    .mesa-canastra {
        flex: 1;
        /* Ocupa o espaço que sobrar */
        min-height: 80px !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        align-items: center;
    }

    /* 3. O SEGREDO: Área do Jogador em Linha (Cartas na esquerda, Botões na direita) */
    .player-area {
        display: flex;
        flex-direction: row !important;
        align-items: flex-end;
        justify-content: space-between;
        width: 100vw;
        padding-bottom: 25px !important;
    }

    .canastra-player-hand .card {
        /* Valor POSITIVO para empurrar a carta da direita para longe da esquerda */
        margin-left: 4px !important;
        flex-shrink: 0 !important;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    }

    /* A primeira carta não precisa de margem, senão ela empurra todo o jogo para fora da tela */
    .canastra-player-hand .card:first-child {
        margin-left: 0 !important;
    }

    .canastra-player-hand {
        align-items: normal !important;
        flex-wrap: nowrap !important;
        /* Impede as cartas de caírem para a linha de baixo */
        overflow-x: auto !important;
        /* Permite rolar a mão com o dedo se tiver muitas cartas */
        -webkit-overflow-scrolling: touch;
        padding: 10px 5px !important;
        justify-content: center !important;
        width: 100%;
    }

    /* 4. Os botões empilhados num bloquinho à direita */
    .canastra-actions {
        display: flex;
        flex-direction: column !important;
        /* Empilhados um sobre o outro */
        justify-content: center !important;
        width: 85px !important;
        margin-top: 0 !important;
        margin-right: 5px;
        gap: 5px !important;
    }

    .canastra-actions button {
        padding: 8px 5px !important;
        font-size: 10px !important;
        width: 100%;
        line-height: 1.1;
    }

    /* No seu mobile.css */
    #mobile-contextual-actions {
        position: fixed;
        bottom: 80px;
        /* Acima da mão do jogador */
        right: 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
    }

    #mobile-contextual-actions button {
        background: #ff8000;
        /* Cor de destaque */
        color: white;
        padding: 12px 20px;
        border-radius: 25px;
        border: none;
        font-weight: bold;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .mesa-area-ia,
    .mesa-area-jogador {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        /* Espaço seguro entre um jogo (ex: trinca de 4) e outro (ex: trinca de 5) */

        width: 100%;
        /* Substituímos o height fixo por flex e min-height para nunca cortar a carta */
        flex: 1;
        min-height: 85px;

        padding: 5px 10px;
        box-sizing: border-box;

        /* Força a rolagem horizontal perfeita */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Suavidade no arrasto pelo celular */

        /* Estilização da barra de rolagem para ficar elegante */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    /* O SEGREDO DO ESPAÇO: Como os grupos de cartas baixadas se comportam */
    .mesa-area-ia .jogo-baixado,
    .mesa-area-jogador .jogo-baixado {
        display: flex;
        flex-direction: row;
        /* PROIBIDO ENCOLHER: Garante que o navegador crie scroll em vez de esmagar o grupo */
        flex-shrink: 0 !important;
    }

    /* Sobreposição agressiva dentro dos jogos baixados para poupar tela */
    .mesa-area-ia .jogo-baixado .card,
    .mesa-area-jogador .jogo-baixado .card {
        margin-left: -32px !important;
        /* Esconde grande parte da carta, mostrando só o índice */
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.4);
    }

    /* A primeira carta do grupo não tem margem negativa */
    .mesa-area-ia .jogo-baixado .card:first-child,
    .mesa-area-jogador .jogo-baixado .card:first-child {
        margin-left: 0 !important;
    }

    /* Área da Mesa (Jogos Baixados) */
    .mesa-canastra {
        min-height: 80px !important;
        /* Menor altura no mobile */
        gap: 5px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        /* Permite rolar os jogos baixados para os lados */
    }

    /* =========================================
       TRUCO
       ========================================= */
    .truco-board {
        justify-content: space-between !important;
        padding: 10px !important;
        height: 100vh;
    }

    /* Como o Truco tem no máximo 3 cartas, não precisamos de sobrepor */
    .truco-board .hand-container {
        gap: 15px !important;
        justify-content: center !important;
    }

    .truco-board .hand-container .card {
        margin-left: 0 !important;
        /* Cancela qualquer sobreposição global */
    }

    .truco-status {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    /* Área central da mesa do Truco */
    .played-cards-area {
        gap: 20px !important;
        margin: 5px 0 !important;
    }

    /* Botões do Truco flutuantes e compactos para não deformar a mesa */
    .truco-controls {
        position: absolute;
        bottom: 50px;
        right: 10px;
        margin-top: 0 !important;
        transform: scale(0.85);
        /* Encolhe os botões em 15% */
        transform-origin: bottom right;
        display: flex;
        flex-direction: row !important;
    }
}

/* =========================================
   10. BOTÕES CONTEXTUAIS (MOBILE CANASTRA)
   ========================================= */
@media screen and (max-width: 950px) {
    #mobile-contextual-actions {
        position: fixed;
        bottom: 110px;
        /* Ajuste este valor para ficar logo acima do topo das cartas da mão */
        right: 10px;
        display: flex;
        flex-direction: row;
        /* Coloca os botões um do lado do outro! */
        gap: 10px;
        z-index: 9999;
        pointer-events: auto;
    }

    .btn-contextual {
        background: #333;
        /* Cor neutra para descarte/lixo */
        color: #fff;
        padding: 10px 18px;
        border-radius: 25px;
        border: 2px solid #fff;
        font-weight: bold;
        font-size: 13px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        /* Impede o texto de quebrar linha */
    }

    .btn-contextual-primary {
        background: #ff8000;
        /* Verde clássico para ações positivas (Baixar Jogo) */
    }

}

/* =========================================
   MESA COMPACTA MOBILE (CUBOS 3D ANIMADOS)
   ========================================= */

/* 1. Esconde o cubo 3D em ecrãs normais (Desktop) */
.mobile-meld-token {
    display: none;
}

@media screen and (max-width: 950px) {
    .canastra-mesa {
        overflow: auto !important;
    }

    /* 2. Esconde as CARTAS REAIS dentro dos jogos da mesa (IA e Jogador) */
    .mesa-area-ia .canastra-grupo .card,
    .mesa-area-jogador .canastra-grupo .card {
        display: none !important;
    }

    /* 3. Redefine o container para alinhar os cubos lado a lado */
    .mesa-area-ia .canastra-grupo,
    .mesa-area-jogador .canastra-grupo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 5px;
    }

    /* 4. O DESIGN DO CUBO 3D */
    .mobile-meld-token {
        display: flex !important;
        /* Força a exibição no mobile */
        flex-direction: column;
        align-items: center;
        justify-content: center;

        /* Formato do Cubo com cantos arredondados */
        width: 55px;
        height: 60px;
        border-radius: 16px;

        /* O Efeito 3D de Plástico/Cartão */
        background: linear-gradient(135deg, #ffffff, #e0e0e0);
        box-shadow: 0 6px 0 #999999,
            /* A "espessura" do cubo */
            0 10px 10px rgba(0, 0, 0, 0.4);
        /* A sombra projetada na mesa */

        font-family: 'Arial', sans-serif;
        font-weight: bold;

        /* Animação Dançante */
        animation: dançaCubo 3s infinite ease-in-out;

        /* Transição suave para quando o utilizador tocar */
        transition: transform 0.1s, box-shadow 0.1s;
    }

    /* 5. Interação: O efeito de "afundar" o cubo ao tocar */
    .canastra-grupo:active .mobile-meld-token {
        transform: translateY(6px);
        /* Empurra para baixo */
        box-shadow: 0 0px 0 #999999,
            /* Esconde a espessura */
            0 4px 4px rgba(0, 0, 0, 0.4);
        /* Reduz a sombra */
    }

    /* Cores dos Naipes */
    .mobile-meld-token.red {
        color: #d00000;
    }

    .mobile-meld-token.black {
        color: #222222;
    }

    /* Tipografia interna do cubo */
    .token-suit {
        font-size: 28px;
        line-height: 1;
        margin-top: 2px;
    }

    .token-count {
        font-size: 13px;
        background: rgba(0, 0, 0, 0.08);
        padding: 2px 10px;
        border-radius: 10px;
        margin-top: 4px;
    }

    /* 6. STATUS DE CANASTRA FEITA (A Mágica Visual) */
    /* Canastra Limpa = Cubo de Ouro */
    .mobile-meld-token.token-limpa {
        background: linear-gradient(135deg, #ffea00, #ffaa00);
        box-shadow: 0 6px 0 #cc7700, 0 10px 10px rgba(0, 0, 0, 0.5);
        color: #553300;
    }

    .mobile-meld-token.token-limpa .token-count {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Canastra Suja = Cubo de Prata/Metal */
    .mobile-meld-token.token-suja {
        background: linear-gradient(135deg, #d4d4d4, #888888);
        box-shadow: 0 6px 0 #555555, 0 10px 10px rgba(0, 0, 0, 0.5);
        color: #222;
    }

    .mobile-meld-token.token-suja .token-count {
        background: rgba(255, 255, 255, 0.3);
    }

    /* --- TIER: DIAMANTE (500 pts) --- */
    .mobile-meld-token.token-diamante {
        background: linear-gradient(135deg, #e0f7fa, #80deea, #00acc1);
        box-shadow: 0 6px 0 #006064, 0 10px 15px rgba(0, 188, 212, 0.4);
        color: #004d40;
        border: 2px solid rgba(255, 255, 255, 0.6);
    }

    /* --- TIER: PLATINA (1000 pts / Real) --- */
    .mobile-meld-token.token-platina {
        background: linear-gradient(135deg, #ffffff, #d1d9e6, #9fa8da);
        box-shadow: 0 6px 0 #7986cb, 0 0 20px rgba(255, 255, 255, 0.8);
        color: #1a237e;
        animation: glimmer 1.5s infinite alternate;
        /* O brilho especial */
    }

    /* Animação para a Platina brilhar */
    @keyframes glimmer {
        0% {
            filter: brightness(1);
        }

        50% {
            filter: brightness(1.4);
        }

        100% {
            filter: brightness(1);
        }
    }

    /* 7. KEYFRAMES: A Coreografia da Dança */
    @keyframes dançaCubo {
        0% {
            transform: translateY(0) rotate(0deg);
        }

        25% {
            transform: translateY(-4px) rotate(-3deg);
        }

        50% {
            transform: translateY(0) rotate(0deg);
        }

        75% {
            transform: translateY(-4px) rotate(3deg);
        }

        100% {
            transform: translateY(0) rotate(0deg);
        }
    }

    .player-hand-area {
        margin-top: -50px !important;
    }
}

/* =========================================
   ANIMAÇÃO DE AVISO: COMPRA OBRIGATÓRIA
   ========================================= */
@keyframes shakeAviso {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px) rotate(-4deg);
    }

    50% {
        transform: translateX(6px) rotate(4deg);
    }

    75% {
        transform: translateX(-6px) rotate(-4deg);
    }
}

.shake-aviso {
    animation: shakeAviso 0.4s ease-in-out !important;
    border-radius: 5px;
    box-shadow: 0 0 20px #ffaa00, 0 0 40px #ffaa00 !important;
    /* Brilho Laranja Neon */
    z-index: 9999;
}

/* =========================================
   BARRA DE AÇÕES DO TRUCO (MOBILE)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. Transforma o contêiner numa barra fixa no rodapé */
    .truco-controls {
        position: fixed;
        bottom: 30px;
        /* Fica logo acima do rodapé de copyright */
        left: 0;
        width: 100%;
        background: rgba(15, 25, 15, 0.95);
        /* Fundo escuro semi-transparente */
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
        z-index: 100;
        box-sizing: border-box;
        border-top: 1px solid #333;
    }

    /* 2. Formata todos os botões para o padrão Touch Mobile */
    .truco-controls .btn-action {
        width: 100%;
        min-height: 50px;
        /* Tamanho ideal para toque de dedo */
        font-size: 1.1rem;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 8px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* 3. Estilo visual de "Perigo/Ação" para o botão principal do TRUCO */
    #btn-truco {
        background: linear-gradient(180deg, #ff4500, #cc0000);
        color: #ffffff;
        border: 2px solid #ffaaaa;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }

    /* 4. Distribui os botões de resposta (Aceitar / Correr / Pedir 6) uniformemente */
    #response-buttons {
        width: 100%;
        justify-content: space-between;
    }

    #response-buttons .btn-action {
        flex: 1;
        /* Faz com que os três dividam o espaço igualmente */
        font-size: 0.9rem;
        /* Fonte um pouco menor para garantir que cabem lado a lado */
        margin: 0 4px;
        /* Pequeno espaçamento entre eles */
        padding: 5px;
    }

    /* 5. Empurra a área de jogo para cima para não ficar escondida debaixo da barra */
    .player-hand-area {
        padding-bottom: 120px;
    }
}


/* =========================================
   AJUSTES DO RODAPÉ (MOBILE)
   ========================================= */
@media screen and (max-width: 950px) {

    /* Ajusta o rodapé na tela inicial (Menu) para ficar fixo e discreto no fundo */
    .container-rodape {
        position: fixed;
        bottom: 5px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 11px;
        /* Letra menor para ficar mais harmônico no celular */
        z-index: 100;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        /* Garante leitura sobre fundos coloridos */
    }
}