body {
            display: flex;
            justify-content: space-around; /* Espaça os Digivices */
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0; /* Cor de fundo para visualização */
            margin: 0;
            padding: 20px; /* Adiciona um pouco de padding no body */
            flex-wrap: wrap; /* Permite quebra de linha em telas menores */
        }

        .digivice-container {
            position: relative; /* Para posicionar o pingente */
            margin: 20px; /* Espaço entre os Digivices */
        }

        .digivice {
            width: 250px; /* Largura do minigame */
            height: 450px; /* Altura do minigame */
            background-color: #ff8c00; /* Laranja fosco (padrão) */
            border: 8px solid #ffffff; /* Bordas brancas */
            border-radius: 20px; /* Bordas arredondadas */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px; /* Espaçamento interno */
            box-sizing: border-box; /* Inclui padding na largura/altura */
            position: relative; /* Para detalhes internos */
        }

        /* Detalhes circulando o aparelho (padrão) */
        .digivice::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border: 2px dashed rgba(255, 255, 255, 0.5); /* Linha tracejada branca */
            border-radius: 15px; /* Segue o arredondamento da borda */
            pointer-events: none; /* Ignora eventos do mouse */
        }

        /* Estilos para o Digivice preto */
        .digivice.black {
            background-color: #333; /* Cor de fundo preta */
            border: 8px solid #d1650d; /* Bordas cinzas escuras */
        }

        .digivice.black::before {
             border: 2px dashed rgba(255, 255, 255, 0.2); /* Linha tracejada mais sutil no preto */
        }


        .screen-area {
            width: 100%;
            flex-grow: 1; /* Continua ocupando o espaço restante */
            background-color: #333; /* Cor de fundo do visor */
            border: 5px inset #555; /* Efeito de profundidade */
            border-radius: 10px;
            margin-bottom: 10px; /* Espaço entre o visor e a área de busca */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Garante que o conteúdo da tela não transborde */
        }

        .screen {
            width: calc(100% - 20px); /* Ajusta a largura para o padding */
            height: calc(100% - 20px); /* Ajusta a altura para o padding */
            background-color: #c0c0c0; /* Cor da tela */
            padding: 10px;
            box-sizing: border-box;
            font-family: 'Press Start 2P', cursive; /* Fonte estilo minigame */
            font-size: 10px;
            color: #333;
            overflow-y: auto; /* Scroll para o conteúdo */
            text-align: left;
        }

        /* Importa uma fonte estilo minigame */
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');


        /* Área de busca movida para fora da tela */
        .search-area { /* Classe genérica para a área de busca */
            width: 100%; /* Ocupa a largura total disponível */
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px; /* Espaço entre a área de busca e os botões */
        }

        .digimon-name-input { /* Classe genérica para o input */
            width: 90%;
            padding: 5px;
            margin-bottom: 8px;
            border: 1px solid #555;
            font-size: 10px;
            box-sizing: border-box;
            font-family: 'Press Start 2P', cursive;
        }

        .search-button { /* Classe genérica para o botão */
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px;
            font-family: 'Press Start 2P', cursive;
        }

        .digimon-info-display { /* Classe genérica para a área de info */
            width: 100%;
            word-wrap: break-word;
        }

        .digimon-info-display img {
            max-width: 100%;
            height: auto;
            margin-bottom: 5px;
            image-rendering: pixelated; /* Mantém a aparência pixelada para imagens pequenas */
        }


        .button-area {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .paw-button-group {
            display: flex;
            align-items: flex-end; /* Alinha os botões menores com a base da bola */
        }

        .button {
            background-color: #ffffff; /* Botões brancos */
            border: 2px solid #333; /* Borda para destacar */
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            margin: 0 5px; /* Espaçamento entre os botões */
        }

        .large-ball {
            width: 50px; /* Tamanho da bola branca central */
            height: 50px;
            margin: 0 10px; /* Espaço maior ao redor da bola central */
        }

        .small-button {
            width: 30px; /* Tamanho dos botões menores */
            height: 30px;
        }

        /* Quadrado para pingente de chaveiro */
        .keychain-loop {
            width: 40px; /* Largura do quadrado */
            height: 20px; /* Altura do quadrado */
            background-color: #ffffff; /* Cor branca */
            border: 3px solid #333;
            border-radius: 5px;
            position: absolute;
            bottom: -25px; /* Posiciona abaixo do Digivice */
            left: 50%;
            transform: translateX(-50%); /* Centraliza */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* Estilo para o pingente no Digivice preto */
        .digivice.black + .keychain-loop {
             background-color: #555; /* Cor cinza escura */
             border-color: #222;
        }