/* ============================================================
   1. PALETA DE CORES (DEFINIÇÕES BRUTAS)
   ============================================================ */
:root {
    /* --- Dimensões (NÃO MEXER - Mantém o layout) --- */
    --card-width: clamp(70px, 6vw, 90px);
    --card-height: clamp(100px, 9vw, 130px);
    --cascade-offset: calc(var(--card-height) - 25px);

    /* --- Cores: Classic Light --- */
    --bg-classic-light: #277714;
    --card-bg-classic-light: #ffffff;
    --text-classic-light: #000000;
    --border-classic-light: #000000;
    --back-classic-light: url('../img/fundo_azul01.png');
    --current-suit-red: var(--suit-red);
    --current-suit-black: var(--suit-black);

    /* --- Cores: Classic Dark --- */
    --bg-classic-dark: #033406;
    --card-bg-classic-dark: #e0e0e0;
    --text-classic-dark: #ffffff;
    --border-classic-dark: #444444;
    --back-classic-dark: url('../img/fundo_vermelho01.png');

    /* --- Cores: Cyber Light (Estilo Laboratório/Mirror's Edge) --- */
    --bg-cyber-light: #858585;
    --card-bg-cyber-light: #ffffff;
    --text-cyber-light: #ff004c;
    /* Rosa Neon */
    --border-cyber-light: #ff004c;
    /* Padrão geométrico sutil para o fundo */
    --bg-img-cyber-light: repeating-linear-gradient(45deg, #e5e5e5 0px, #e5e5e5 1px, transparent 1px, transparent 20px);

    /* --- Cores: Cyber Dark (Estilo Night City) --- */
    --bg-cyber-dark: #050505;
    --card-bg-cyber-dark: #2b2b2b;
    --text-cyber-dark: #00e5ff;
    /* Ciano Neon */
    --border-cyber-dark: #00e5ff;
    --bg-img-cyber-dark: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 80%);

    /* --- Cores Genéricas --- */
    --suit-red: #e44141;
    --suit-black: #000000;
    --suit-cyber-dark: #d3d3d3;
    /* Cinza para substituir o preto no escuro */

    /* --- VALORES PADRÃO (DEFAULT) --- */
    /* Isso impede a tela branca. O site nasce Classic Light até que se prove o contrário */
    --current-bg: var(--bg-classic-light);
    --current-bg-image: none;
    --current-text: var(--text-classic-light);
    --current-card-bg: var(--card-bg-classic-light);
    --current-border-color: var(--border-classic-light);
    --current-card-back: var(--back-classic-light);
    --current-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --current-suit-black: var(--suit-black);
    --current-btn-bg: #fff;
    --current-btn-text: #333;
    --current-btn-border: #ccc;
    --current-intro-text: linear-gradient(270deg, #ff004c, #ffb300, #00e5ff);
}

/* ============================================================
   2. MAPA DE TEMAS (APLICAÇÃO DINÂMICA)
   ============================================================ */

/* 2.1 CLASSIC + LIGHT */
body[data-skin="classic"][data-theme="light"] {
    --current-bg: var(--bg-classic-light);
    --current-bg-image: none;
    --current-text: var(--text-classic-light);
    --current-card-bg: var(--card-bg-classic-light);
    --current-border-color: var(--border-classic-light);
    --current-card-back: var(--back-classic-light);
    --current-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --current-suit-black: var(--suit-black);
    --current-btn-bg: #fff;
    --current-btn-text: #333;
    --current-btn-border: #ccc;
    --current-intro-text: linear-gradient(270deg, #ff004c, #ffb300, #00e5ff);
    --current-suit-red: #e44141;
    /* Vermelho Tradicional */
    --current-suit-black: #000000;
    /* Preto Tradicional */
}

/* 2.2 CLASSIC + DARK */
body[data-skin="classic"][data-theme="dark"] {
    --current-bg: var(--bg-classic-dark);
    --current-bg-image: none;
    --current-text: var(--text-classic-dark);
    --current-card-bg: var(--card-bg-classic-dark);
    --current-border-color: var(--border-classic-dark);
    --current-card-back: var(--back-classic-dark);
    --current-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    --current-suit-black: var(--suit-black);
    --current-btn-bg: #fff;
    --current-btn-text: #333;
    --current-btn-border: #ccc;
    --current-intro-text: linear-gradient(270deg, #ff004c, #ffb300, #00e5ff);
    --current-suit-red: #e44141;
    /* Vermelho Tradicional */
    --current-suit-black: #000000;
    /* Preto Tradicional */
}

/* 2.3 CYBER + LIGHT */
body[data-skin="cyber"][data-theme="light"] {
    --current-bg: var(--bg-cyber-light);
    --current-bg-image: var(--bg-img-cyber-light);
    --current-text: var(--text-cyber-light);
    --current-card-bg: var(--card-bg-cyber-light);
    --current-border-color: var(--border-cyber-light);
    /* Fundo da carta específico do CSS original */
    --current-card-back: repeating-linear-gradient(45deg, rgba(255, 0, 76, 0.05) 0px, rgba(255, 0, 76, 0.05) 1px, transparent 1px, transparent 11px),
        linear-gradient(135deg, rgba(255, 0, 76, 0.1) 25%, transparent 25%);
    --current-shadow: 0 0 10px rgba(255, 0, 76, 0.3);
    --current-suit-black: #555;
    --current-btn-bg: #fff;
    --current-btn-text: var(--text-cyber-light);
    --current-btn-border: var(--text-cyber-light);
    --current-intro-text: linear-gradient(270deg, #ff004c, #333, #ff004c);
    --current-suit-red: #00e5ff;
    /* Turquesa Neon substitui o Vermelho */
    --current-suit-black: #d3d3d3;
    /* Cinza claro substitui o Preto */
}

/* 2.4 CYBER + DARK */
body[data-skin="cyber"][data-theme="dark"] {
    --current-bg: var(--bg-cyber-dark);
    --current-bg-image: var(--bg-img-cyber-dark);
    --current-text: var(--text-cyber-dark);
    --current-card-bg: var(--card-bg-cyber-dark);
    --current-border-color: var(--border-cyber-dark);
    /* Fundo da carta específico do CSS original */
    --current-card-back: linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(0, 229, 255, 0.2) 0%, transparent 70%);
    --current-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 0, 0, 1);
    --current-suit-black: var(--suit-cyber-dark);
    --current-btn-bg: #1a1a1a;
    --current-btn-text: var(--text-cyber-dark);
    --current-btn-border: var(--text-cyber-dark);
    --current-intro-text: linear-gradient(270deg, #00e5ff, #fff, #00e5ff);
    --current-suit-red: #00e5ff;
    /* Turquesa Neon substitui o Vermelho */
    --current-suit-black: #d3d3d3;
    /* Cinza claro substitui o Preto */
}

/* ============================================================
   3. LAYOUT GERAL (Aplicando as Variáveis)
   ============================================================ */
body {
    background-color: var(--current-bg);
    background-image: var(--current-bg-image);
    color: var(--current-text);
    transition: background-color 0.3s, color 0.3s;
    font-family: sans-serif;
    margin: 0;
    overflow: hidden;
    height: 100vh;
}

.game-board {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
}

/* Ajuste do Título para não sumir no escuro */
[data-theme="dark"] .intro-container p {
    color: #ccc;
}

/* Cyber Light p adjustment */
[data-skin="cyber"][data-theme="light"] .intro-container p {
    color: #333;
}

/* ===============================
   GERENCIAMENTO DE SEÇÕES
================================ */
section {
    display: none;
    height: 100%;
}

section.active-section {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===============================
   HEADER & CONTROLES
================================ */
.menu-superior {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}

/* Container do controle de Canastra no Header */
.canastra-controls {
    display: none;
    /* JS controla a visibilidade */
    align-items: center;
    gap: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(128, 128, 128, 0.3);
    /* Divisória sutil */
}

/* Estilizando o Label para parecer um botão */
.canastra-controls label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;

    /* Copiando o estilo dos seus botões */
    padding: 8px 15px;
    background-color: var(--card-bg-classic-light);
    /* Cor de fundo padrão */
    color: var(--text-classic-light);
    border: 1px solid var(--border-classic-light);
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s ease;
    user-select: none;
}

/* Efeito de Hover para o label (igual ao botão) */
.canastra-controls label:hover {
    filter: brightness(0.9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilização do Switch (Toggle) dentro do "botão" */
.switch-slider {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    background-color: #ccc;
    border-radius: 20px;
    transition: .3s;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
}

/* Esconde o checkbox real */
#canastra-permite-trinca {
    display: none;
}

/* Cores do switch quando ativo */
#canastra-permite-trinca:checked+.switch-slider {
    background-color: #4CAF50;
}

#canastra-permite-trinca:checked+.switch-slider:before {
    transform: translateX(16px);
}

/* Ajuste para o Tema Cyber/Dark (se o body tiver o atributo) */
[data-theme="dark"] .canastra-controls label {
    background-color: #1a1a1a;
    color: #00ff41;
    border-color: #00ff41;
}

/* Ajuste nos botões para não ficarem colados */
header button,
header select {
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}

header select,
header button {
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;

    /* Aplicação dinâmica das cores dos botões */
    background: var(--current-btn-bg);
    color: var(--current-btn-text);
    border: 1px solid var(--current-btn-border);
    outline: none;
}

/* Hover e Efeitos Especiais para Cyber */
[data-skin="cyber"] header select,
[data-skin="cyber"] header button,
[data-skin="cyber"] #reset-game-btn {
    text-transform: uppercase;
    font-family: 'Russo One', sans-serif;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    border-width: 1.5px;
}

[data-skin="cyber"] header select:hover,
[data-skin="cyber"] header button:hover {
    background: var(--current-text);
    /* Inverte para a cor do neon */
    color: #000;
    box-shadow: 0 0 20px var(--current-text);
}

[data-skin="cyber"] header select option {
    background: #1a1a1a;
    color: var(--current-text);
}

/* Visibilidade dos Botões (Layout preservado) */
#reset-game-btn,
#back-menu-btn {
    display: none !important;
}

body:not(:has(#intro-section.active-section)) #reset-game-btn,
body:not(:has(#intro-section.active-section)) #back-menu-btn {
    display: inline-block !important;
}

/* ===============================
   ESTILO DO MENU (INTRO)
================================ */
#intro-section {
    display: none;
    text-align: center;
    padding-top: 5vh;
}

#intro-section.active-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-container h1 {
    position: relative;
    font-size: 3rem;
    font-family: 'Russo One', sans-serif;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    /* Gradiente dinâmico */
    background: var(--current-intro-text);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 6s ease infinite;

    text-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 255, 255, .25);
    z-index: 3;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    display: inline-block;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.intro-container h1::before {
    content: "Card Games Valley";
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    -webkit-text-fill-color: white;
    clip-path: inset(0 0 75% 0);
    filter: blur(1px);
    opacity: 0.95;
    z-index: 4;
    pointer-events: none;
}

.intro-container p {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.game-menu {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.game-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid var(--current-border-color);
    /* Borda dinâmica */
    border-radius: 15px;
    padding: 20px;
    width: 150px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    color: var(--current-text);
}

.game-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    box-shadow: var(--current-shadow);
}

.game-card .icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.header-controls {
    display: flex;
    gap: 10px;
    padding: 10px;
}

#snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
    opacity: 0.7;
}

.tempestade-ativa #snow-canvas {
    opacity: 1;
}

.movimento-valido {
    cursor: pointer !important;
}

/* Opcional: um brilho suave na zona de destino para ajudar visualmente */
.movimento-valido-brilho {
    box-shadow: inset 0 0 10px rgba(0, 255, 204, 0.5);
}

/* ===============================
   ESTRUTURA DO JOGO PACIENCIA (LAYOUT PRESERVADO)
================================ */
.top-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.left-group {
    display: flex;
    gap: 15px;
}

.right-group {
    display: flex;
    gap: 40px;
    margin-left: auto;
}

.foundation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.foundation .card {
    position: absolute !important;
    /* CRUCIAL */
    margin-top: 0 !important;
    top: -2px;
    left: -2px;
}

/* Garante que os filhos acompanhem a carta principal no arraste visual */
.card.dragging~.card {
    pointer-events: none;
    /* Evita bugs de colisão durante o arraste */
}

.pile {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    position: relative;
}

.tableau {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.column {
    width: var(--card-width);
    min-height: 400px;
    position: relative;
}

.column,
.foundation {
    transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ===============================
   ESTRUTURA DO JOGO SPIDER (LAYOUT PRESERVADO)
================================ */
#paciencia-spider-section .column {
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-height: var(--card-height);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.game-board-spider {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    min-height: 80vh;
}

.spider-header {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

#spider-foundations {
    display: flex;
    justify-content: center;
    /* Centraliza os slots */
    gap: 10px;
    /* Espaço entre os slots */
    margin-bottom: 20px;
    /* Espaço para o tabuleiro abaixo */
    flex-wrap: wrap;
    /* Se a tela for pequena, eles quebram linha em vez de estourar */
}

.spider-foundation-slot {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed var(--current-border-color);
    /* Borda pontilhada */
    border-radius: 8px;
    opacity: 0.6;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.spider-foundation-slot .card {
    position: absolute !important;
    margin-top: 0 !important;
}

/* No tema Cyber, vamos deixar a borda neon */
body[data-skin="cyber"] .spider-foundation-slot {
    border: 2px solid var(--current-border-color);
    box-shadow: inset 0 0 8px var(--current-border-color);
}

#spider-tableau {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

#spider-tableau .column {
    width: var(--card-width);
    min-height: var(--card-height);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

#spider-tableau .card {
    margin-top: -100px;
    position: relative;
    z-index: 1;
}

#spider-tableau .card.red {
    color: var(--current-suit-red) !important;
}

#spider-tableau .card:first-child {
    margin-top: 0;
}

/* ===============================
    ESTRUTURA DO JOGO FREECELL (LAYOUT PRESERVADO)
================================ */

.game-top-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
}

.free-cells,
.foundations {
    display: flex;
    gap: 10px;
}

/* Estilização dos Slots Vazios */
.free-slot,
#freecell-section .foundation {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    /* Borda pontilhada para indicar o local */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Opcional: Adicionar um ícone ou letra de fundo para as Foundations */
#freecell-section .foundation::after {
    content: "A";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    opacity: 0.2;
    color: white;
}

#freecell-section .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--card-width);
}

#freecell-section .foundation .card {
    position: absolute;
    margin-top: 0 !important;
    /* Remove o cascade das colunas */
    top: 0;
    left: 0;
}

#freecell-section .column .card {
    margin-top: -100px;
    /* Ajuste conforme o seu cascade-offset */
}

#freecell-section .column .card:first-child {
    margin-top: 0;
}

.king-container {
    width: 80px;
    height: 100px;
    /* Aumentado de 80 para 100 */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Alinha o rosto na base para sobrar espaço para a coroa */
    background: transparent;
    /* Removi o fundo cinza para destacar o personagem */
    margin: 0 10px;
    padding-bottom: 5px;
}

.king-face {
    position: relative;
    width: 60px;
    height: 70px;
    background: #f1c27d;
    /* Cor de pele */
    border: 2px solid #000;
    border-radius: 10px 10px 20px 20px;
}

.eye {
    position: absolute;
    top: 20px;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #000;
    border-radius: 50%;
}

.left-eye {
    left: 10px;
}

.right-eye {
    right: 10px;
}

/* Quando os olhos piscam, escondemos a pupila e mudamos o fundo */
.eye.blinking {
    background: #8d5524 !important;
    /* Cor da pálpebra (um pouco mais escura que a pele) */
}

.eye.blinking .pupil {
    display: none;
    /* Esconde a pupila na piscada */
}

.pupil {
    position: absolute;
    width: 5px;
    height: 5px;
    background: black;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Remova a linha transition: all 0.05s linear; */
    pointer-events: none;
    /* Garante que a pupila não interfira no mouse */
}

/* Detalhes do Rosto */
.king-nose {
    position: absolute;
    top: 35px;
    left: 27px;
    width: 6px;
    height: 10px;
    border-left: 2px solid #8d5524;
}

.king-mouth {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: 30px;
    height: 5px;
    border-bottom: 2px solid #000;
    border-radius: 50%;
}

.king-face::before {
    content: "";
    position: absolute;
    top: -20px;
    /* Posiciona acima da cabeça */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 25px;
    background: #ffd700;
    /* Ouro */
    border: 1px solid #000;
    /* Cria o formato de 3 pontas da coroa */
    clip-path: polygon(0% 100%, 0% 20%, 25% 60%, 50% 0%, 75% 60%, 100% 20%, 100% 100%);
    z-index: 2;
}

/* Um pequeno detalhe: a base da coroa */
.king-face::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 8px;
    background: #e6c200;
    border: 1px solid #000;
    border-radius: 2px;
    z-index: 3;
}

/* No seu style.css */
body[data-skin="cyber"] .king-face {
    background: #00ffcc;
    /* Rosto Neon */
    box-shadow: 0 0 15px #00ffcc;
}

body[data-skin="cyber"] .king-face::before {
    background: #ff00ff;
    /* Coroa Magenta Neon */
    box-shadow: 0 0 10px #ff00ff;
}

/* ===============================
   CARTAS - ESTILO GERAL (USANDO VARIÁVEIS)
================================ */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background-color: var(--current-card-bg);
    /* Cor dinâmica */
    border-radius: 8px;

    /* Borda dinâmica */
    border: 1px solid var(--current-border-color);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;

    /* Sombra dinâmica */
    box-shadow: var(--current-shadow);

    cursor: grab;
    user-select: none;
}

[data-skin="cyber"] .card {
    border-width: 1.5px;
    /* Borda mais grossa no cyber */
}

/* Ajuste específico para quando a carta está virada para cima */
.card.face-up {
    color: var(--current-suit-black);
    cursor: pointer;
    /* Garante que todas as cartas abertas mostrem o "dedinho" */
}

/* Opcional: Efeito visual ao passar o mouse em cartas que podem ser movidas */
.card.face-up:hover {
    filter: brightness(1.1);
    transform: translateY(-5px);
    /* Dá um leve destaque para cima */
    transition: transform 0.1s ease;
}

/* Forçar vermelho neon/brilhante se for necessário, mas o vermelho padrão costuma funcionar */

.card[data-suit="♥"],
.card[data-suit="♦"] {
    color: var(--current-suit-red) !important;
}

.card[data-suit="♠"],
.card[data-suit="♣"] {
    color: var(--current-suit-black);
}

.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
    align-self: flex-start;
    text-align: left;
}

.card-corner.bottom {
    align-self: flex-end;
    transform: rotate(180deg);
}

.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.figure-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body[data-skin="cyber"] .figure-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 1. Blur para tirar a perfeição
       2. Drop-shadow para criar um brilho neon em volta da figura
       3. Opacity para parecer uma projeção */
    filter: blur(0.4px) drop-shadow(0 0 2px var(--current-suit-red));
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* Efeito de "ligar" o holograma quando passa o mouse */
body[data-skin="cyber"] .card:hover .figure-img {
    opacity: 1;
    filter: blur(0px) drop-shadow(0 0 5px var(--current-suit-red));
}

/* ============================================================
   CORREÇÃO DE BUG VISUAL (SPIDER) - FORÇAR CORES
   Garante que cartas de Espadas/Paus sejam pretas e 
   Copas/Ouros sejam vermelhas, mesmo se a classe auxiliar sumir.
   ============================================================ */

/* Força a cor PRETA para Espadas (♠) e Paus (♣) */
.game-card[data-suit="♠"],
.game-card[data-suit="♣"] {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Força a cor VERMELHA para Copas (♥) e Ouros (♦) */
.game-card[data-suit="♥"],
.game-card[data-suit="♦"] {
    color: #d40000 !important;
    fill: #d40000 !important;
}

/* Garante que o conteúdo interno esteja visível */
.game-card .card-content,
.game-card span,
.game-card div {
    opacity: 1 !important;
    visibility: visible !important;
}

.selected-card {
    outline: 4px solid #00ffcc !important;
    /* Cor neon para combinar com o tema */
    box-shadow: 0 0 20px #00ffcc;
    transform: translateY(-10px);
    transition: transform 0.2s;
    z-index: 100;
}

/* ===============================
   CARTA VIRADA (FACE DOWN)
================================ */
.card.face-down {
    background-color: var(--current-card-bg) !important;
    background-image: var(--current-card-back) !important;
    background-size: cover;
    /* Para classic */
    background-position: center;
    border-color: var(--current-border-color);
}

.card.face-down .card-corner,
.card.face-down .card-center {
    display: none;
}

/* Ajustes específicos de tamanho de background para Cyberpunk */
body[data-skin="cyber"] .card.face-down {
    background-size: 20px 20px, 100%;
    /* Ajuste para os padrões geométricos */
    box-shadow: var(--current-shadow);
}

body[data-skin="cyber"] .card.black .card-center {
    text-shadow: 0 0 10px var(--current-suit-black);
}

body[data-skin="cyber"] .card.red .card-center {
    text-shadow: 0 0 10px var(--current-suit-red);
}

[data-skin="cyber"][data-theme="dark"] .card.face-down {
    background-size: 15px 15px, 15px 15px, 100% 100%;
}

/* ===============================
   ANIMAÇÕES DRAG & DROP
================================ */
.dragging,
.dragging-child {
    opacity: 0.5;
}

.drag-over {
    outline: 2px dashed rgba(255, 255, 255, 0.6);
}

/* ===============================
   CASCATA GENÉRICA
================================ */
.column .card {
    margin-top: calc(-1 * var(--cascade-offset));
    z-index: 1;
}

.column .card:first-child {
    margin-top: 0 !important;
}

/* Destaque para colunas que podem receber a carta selecionada */
.column.highlight-target,
.foundation.highlight-target {
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    position: relative;
}

/* Efeito luminoso no hover */
.column.highlight-target:hover,
.foundation.highlight-target:hover {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

/* ===============================
   CANASTRA LAYOUT - FINAL POLISH
================================ */

#canastra-section .game-board {
    display: grid;
    /* 1fr para a mesa (ocupa o resto), 120px para o centro, 140px para a mão */
    grid-template-rows: 1fr 120px 140px;
    height: calc(100vh - 70px);
    /* Aumentei a altura total da área de jogo */
    padding: 0 20px;
    /* REMOVIDO o padding superior (era 10px) */
    gap: 5px;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    /* Importante para elementos absolutos dentro dele */
}

/* 1. MESA (Área Superior) */
/* =========================================
   MESA PRINCIPAL (Onde ficam os jogos baixados)
   ========================================= */
.canastra-mesa {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Garante que o conteúdo comece do topo */
    width: 100%;
    height: 100%;
    padding: 10px;
    /* Padding interno leve */
    box-sizing: border-box;

    /* PULO DO GATO: Margem negativa para subir além do limite normal */
    margin-top: -10px;

    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* =========================================
   ÁREAS INDIVIDUAIS (IA e JOGADOR)
   ========================================= */
.mesa-area-ia,
.mesa-area-jogador {
    display: flex;
    flex-direction: row;
    /* Os jogos ficam um ao lado do outro */
    align-items: center;
    /* Centraliza verticalmente os jogos */
    gap: 15px;
    /* Espaço entre cada montinho de jogo */

    width: 100%;
    height: 48%;
    /* Cada um pega quase metade da mesa */

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

    /* Scroll Horizontal: Se tiver muitos jogos, aparece barra só aqui */
    overflow-x: auto;
    overflow-y: hidden;

    /* Scrollbar bonita */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Diferenciação visual (Opcional) */
.mesa-area-ia {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Linha divisória sutil */
    align-items: flex-start;
    /* Jogos da IA colados no topo */
}

.mesa-area-jogador {
    align-items: flex-end;
    /* Jogos do jogador colados embaixo (perto da mão) */
}

/* =========================================
   GRUPOS DE CARTAS NA MESA (Os jogos baixados)
   ========================================= */
.canastra-grupo {
    position: relative;
    /* A largura deve ser suficiente para uma carta */
    min-width: var(--card-width);
    width: var(--card-width);

    /* Altura flexível dependendo de quantas cartas tem */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Cartas empilhadas em cascata vertical (padrão canastra) */

    /* Margem para não colar no próximo jogo */
    margin-right: 15px;
}

/* Ajuste visual das cartas já baixadas na mesa */
.canastra-grupo .card {
    position: relative;
    /* Mudado para relative para funcionar melhor com flex column */
    margin-top: -80px;
    /* Faz o efeito cascata (uma carta em cima da outra) */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    /* Sombra invertida para destacar a de cima */
}

/* A primeira carta do grupo não deve ter margem negativa */
.canastra-grupo .card:first-child {
    margin-top: 0;
}

/* =========================================
   INTERATIVIDADE
   ========================================= */
.mesa-area-jogador .canastra-grupo {
    cursor: pointer;
    transition: transform 0.2s;
}

.mesa-area-jogador .canastra-grupo:hover {
    transform: translateY(-5px) scale(1.02);
    filter: brightness(1.1);
}

/* Customização da Scrollbar (WebKit) */
.mesa-area-ia::-webkit-scrollbar,
.mesa-area-jogador::-webkit-scrollbar {
    height: 8px;
}

.mesa-area-ia::-webkit-scrollbar-track,
.mesa-area-jogador::-webkit-scrollbar-track {
    background: transparent;
}

.mesa-area-ia::-webkit-scrollbar-thumb,
.mesa-area-jogador::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

/* 2. CENTRO (Compra e Lixo) */
.canastra-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    /* Distância equilibrada */
    position: relative;
    min-height: 100px;
}

/* Slots Visuais (Marcas no feltro onde as cartas ficam) */
.slot-deck,
.slot-lixo {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Ícone ou texto sutil no fundo do slot vazio */
.slot-deck::after {
    content: "DECK";
}

.slot-lixo::after {
    content: "LIXO";
}

.slot-deck::after,
.slot-lixo::after {
    color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    font-size: 0.8rem;
    pointer-events: none;
}

/* Garante que o baralho real fique exatamente em cima do slot */
#canastra-deck,
#canastra-lixo {
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. MÃO DO JOGADOR */
.canastra-player-hand {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    perspective: 1000px;
    width: 100%;
}

.canastra-player-hand .card {
    /* Mantendo a lógica anterior que estava boa */
    margin-left: -45px;
    /* Um pouco menos apertado */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.4);
    transform-origin: bottom center;
}

.canastra-player-hand .card:first-child {
    margin-left: 0;
}

.canastra-player-hand .card:hover {
    /* Sobe reto, sem ir para o lado */
    transform: translateY(-40px) scale(1.15);
    z-index: 1000 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.selected-to-meld {
    transform: translateY(-40px) !important;
    border: 2px solid #00e676 !important;
    /* Verde neon */
    box-shadow: 0 0 15px #00e676 !important;
    z-index: 100;
    /* Mantém elevada mesmo sem mouse */
}



/* Canastra Suja (Ex: Borda Cinza) */
.canastra-suja {
    border: 2px solid #7f8c8d !important;
}

/* Canastra Limpa (Ex: Brilho Dourado) */
.canastra-limpa {
    border: 2px solid #f1c40f !important;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.6);
}

/* Garante que o lixo mostre a pilha levemente deslocada */
.lixo-container {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
}

.lixo-container .card {
    position: absolute;
    /* Faz um leque horizontal sutil no lixo */
    transition: transform 0.2s;
}

/* Espalha as cartas do lixo para a direita conforme a quantidade */
.lixo-container .card:nth-child(n) {
    transform: translateX(calc(10px * (n - 1)));
}

/* No seu style.css */
.canastra-center .btn-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -150%);
    /* Posiciona acima do deck/lixo */
    z-index: 2000;

    background: linear-gradient(135deg, #ffca28 0%, #ff8f00 100%);
    color: #1a1a1a;
    border: 2px solid #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

    display: none;
    /* Escondido por padrão */
    cursor: pointer;
}

.canastra-center .btn-action.visible {
    display: block !important;
    animation: surgimentoBotao 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes surgimentoBotao {
    from {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -150%) scale(1);
    }
}

#canastra-section .btn-action:hover {
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.btn-passar {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    color: white !important;
    top: 20px !important;
    /* Fica um pouco abaixo do botão de baixar */
    display: none;
    /* Começa escondido */
}

.btn-passar.visible {
    display: block !important;
    opacity: 1 !important;
}

#dica-descarte {
    position: absolute;
    bottom: 180px;
    /* Acima da mão do jogador */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    pointer-events: none;
    /* Não atrapalha cliques */
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2000;
    border: 1px solid #ffb300;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

#dica-descarte.visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* Pequena setinha no balão */
#dica-descarte::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ffb300 transparent transparent transparent;
}

.canastra-score-board {
    position: absolute;
    /* Tira ele do fluxo para não ocupar espaço */
    top: 15px;
    /* Distância do topo */
    right: 30px;
    /* Canto direito (ou use left: 50% + transform para centralizar) */
    z-index: 500;
    /* Fica acima da mesa */

    /* Estilo visual */
    display: flex;
    gap: 15px;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.score-item {
    font-family: 'Russo One', sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    /* Fonte menor */
    display: flex;
    align-items: center;
    gap: 5px;
}

.score-item span {
    font-size: 1.1rem;
    /* Destaque apenas no número */
}

#score-jogador {
    color: #00e676;
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}

#score-ia {
    color: #ff5252;
    text-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
}

#placar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.placar-hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.placar-content {
    background: #0f3d0f;
    color: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    min-width: 400px;
    text-align: center;
}

.placar-colunas {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

.placar-content ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

/* ===============================
   ESTILOS DO TRUCO
================================ */
#truco-board {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    max-height: 100vh;
    position: relative;
    padding-bottom: 60px;
    /* Espaço pro rodapé */
}

.truco-scoreboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    color: white;
}

.score-box {
    text-align: center;
}

.score-value {
    font-size: 2rem;
    font-weight: bold;
    display: block;
    font-family: 'Russo One', sans-serif;
}

.score-multiplier {
    background: #ffb300;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.rounds-wins {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 5px;
    min-height: 10px;
}

.round-dot {
    width: 10px;
    height: 10px;
    background-color: #555;
    border-radius: 50%;
}

.round-dot.won {
    background-color: #00e676;
    /* Verde Vitoria */
    box-shadow: 0 0 5px #00e676;
}

/* Mesa e Cartas */
.truco-mesa {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.center-arena {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 20px 0;
}

.deck-vira-area {
    display: flex;
    gap: 15px;
    align-items: center;
}

#truco-vira .card {
    transform: rotate(90deg);
    /* Vira fica deitada */
}

.played-cards-area {
    display: flex;
    gap: 20px;
    min-width: 200px;
    justify-content: center;
}

.card-slot {
    width: var(--card-width);
    height: var(--card-height);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hand-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    min-height: var(--card-height);
}

.cpu-hand-area {
    margin-bottom: auto;
    /* Empurra pro topo */
}

.player-hand-area {
    margin-top: auto;
    /* Empurra pro fundo */
}

#player-hand-truco .card:hover {
    transform: translateY(-20px);
    z-index: 10;
    border-color: #ffb300;
}

/* Botões de Ação */
.truco-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    min-height: 80px;
}

.truco-btn {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: white;
    font-size: 1.2rem;
    padding: 15px 40px;
    border: 2px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation: pulse 2s infinite;
}

.truco-status {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 15px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Ajuste para carta manilha (brilho especial) */
.card.manilha {
    box-shadow: 0 0 15px #ffd700;
    /* Dourado */
    border: 2px solid #ffd700;
}

/* ===============================
   EFEITOS VISUAIS & UTILS
================================ */
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10001;
    display: none;
}

.fireworks-active {
    display: block !important;
}

#vitoria-overlay {
    position: fixed;
    /* Fixa na tela toda, ignorando o scroll ou seção */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Fundo escurecido */
    display: none;
    /* Começa como none */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* Valor bem alto para ficar na frente de TUDO */
}

/* Quando a função JS rodar, ela troca para display flex */
#vitoria-overlay.vitoria-visible {
    display: flex !important;
    opacity: 1;
}

/* Classe para esconder totalmente */
.vitoria-hidden {
    display: none !important;
}

.vitoria-content {
    background: var(--current-card-bg);
    color: var(--current-text);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border: 3px solid #ffb300;
    /* Pode parametrizar se quiser, mas dourado é clássico de vitória */
    box-shadow: 0 0 30px rgba(255, 179, 0, 0.5);
    transform: scale(0.5);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#vitoria-overlay.vitoria-visible {
    opacity: 1;
}

#vitoria-overlay.vitoria-visible .vitoria-content {
    transform: scale(1);
}

.vitoria-titulo {
    font-family: 'Russo One', sans-serif;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 0 20px #ff004c;
    margin-bottom: 10px;
}

#btn-jogar-novamente {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 1.2rem;
    cursor: pointer;
    background: #ffb300;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    transition: transform 0.2s;
}

#btn-jogar-novamente:hover {
    transform: scale(1.1);
}

.derrota-hidden {
    display: none;
}

.derrota-visible {
    display: flex;
}

.derrota-content {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}

.derrota-visible .derrota-content {
    transform: scale(1);
    opacity: 1;
}


/* ===============================
    TOAST DE NOTIFICAÇÕES
================================ */
/* Notificações do Jogo (Toast) */
#game-toast {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    border: 2px solid #ffb300;
    /* Dourado */
    font-family: 'Russo One', sans-serif;
    font-size: 1.2rem;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
    pointer-events: none;
    /* Permite clicar através dele */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#game-toast.visible {
    opacity: 1;
}

/* Cores por tipo de mensagem */
#game-toast.error {
    border-color: #ff4444;
    color: #ffcccc;
}

#game-toast.success {
    border-color: #00C851;
    color: #ccffcc;
}

#game-toast.info {
    border-color: #33b5e5;
}

/* --- MODAL DOAÇÃO (ESTILO CELULAR) --- */

/* O fundo escuro que cobre a tela */
.modal-overlay {
    display: none;
    /* Escondido por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fundo semi-transparente */
    z-index: 2000;
    /* Acima de tudo */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    /* Desfoque no fundo */
}

/* A janela do modal */
.modal-smartphone {
    background: var(--metal-gradiente-meio);
    /* Usa o fundo do seu player */
    border: 1px solid var(--cor-borda-popup);
    width: 300px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.3);
    /* Brilho neon suave */
    color: var(--cor-texto-geral);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: slideUp 0.3s ease-out;
    overflow: hidden;
}

/* Animação de entrada suave */
@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--cor-texto-rodape);
    /* Azul neon */
}

.btn-fechar {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}

.modal-body {
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
}

/* Campo e Botão do PIX */
.pix-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qrcode-container {
    background: #fff;
    /* Fundo branco para garantir a leitura do QR */
    padding: 10px;
    border-radius: 10px;
    width: 180px;
    height: 180px;
    margin: 0 auto 15px auto;
    /* Centraliza e dá margem embaixo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#img-qrcode {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    /* Mantém o QR Code nítido */
}

.pix-container input {
    font-size: 0.75rem;
    /* Diminui um pouco a fonte para chaves longas */
    letter-spacing: -0.5px;
    width: 100%;
    padding: 8px;
    background: #111;
    border: 1px solid #555;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}

.agradecimento {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
}

.btn-copiar {
    background: #00b7ff;
    color: #000;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.btn-copiar:hover {
    background: #fff;
    box-shadow: 0 0 10px #00b7ff;
}

/* ===============================
   RODAPÉ FIXO
================================ */
.container-rodape {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--current-text);
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 100;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
}