/* 1. Configuração Geral e Cor de Fundo Sólida */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0b0f19; /* O mesmo azul sólido escuro do fundo do jogo */
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;


            height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;


  margin: 0;
        }

        /* 2. Estilo do Header */
        header {
            background-color: #121824;
            border-bottom: 2px solid #1f293d;
            padding: 20px;
            text-align: center;
            width: 100%;
        }

        header h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.5rem;
            color: #00f0ff;
            letter-spacing: 0.5px;
        }

        header p {
            font-size: 0.9rem;
            color: #637592;
            margin-top: 5px;
        }

        /* 3. Contentor que delimita e centra a área do jogo */
        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
         
            width: 100%;

            flex: 1;
  display: flex;
  flex-direction: column;
  
  min-height: 0; /* Crucial para o flexbox permitir que o H5P encolha */
  padding: 10px;
  box-sizing: border-box;
        }

       
 
 
 /* Substitui apenas estas duas regras no teu CSS atual */

.h5p-container {
    width: 100%;
    max-width: 1280px;
     /* IMPEDE O SCROLL: Garante que a altura do jogo nunca excede o ecrã útil.
     Subtraímos 150px (referentes à altura aproximada do teu header + footer + paddings).
     Desta forma, o jogo encolhe proporcionalmente antes de empurrar o footer. */
  max-height: calc(100vh - 150px) !important;
    height: auto; /* Remove a altura fixa de 785px para permitir fluidez */
    aspect-ratio: 1280 / 785 !important; /* Mantém a proporção perfeita do jogo (720px) + botões (65px) */
    background-color: transparent;
    border-radius: 16px;
    
    border: 0px solid #1f293d;
    overflow: hidden;
    position: relative;
}

.h5p-container .h5p-content {
    
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important; /* Remove a altura mínima fixa para o jogo poder encolher */
}

        /* ====================================================================
           💥 REMOÇÃO TOTAL DA DIV DE INTRODUÇÃO E RESET DE ESPAÇO (image_9c4ac6.png)
           ==================================================================== */
        
        /* Oculta e colapsa a div de introdução da pergunta */
        .h5p-container .h5p-question-introduction,
        .h5p-container .h5p-dragquestion-introduction,
        .h5p-container .h5p-question-introduction-wrapper {
            display: none !important;
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }

        /* Garante que o conteúdo do jogo sobe até ao topo da div container */
        .h5p-container .h5p-question-content {
            margin-top: 0 !important;
            padding-top: 0 !important;
            height: calc(100% - 65px) !important; /* Deixa exatamente os 65px no fundo livres para a pontuação */
        }

        /* Alinhamento do corpo interno do jogo */
        .h5p-container .h5p-inner,
        .h5p-container .h5p-dragquestion {
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            top: 0 !important;
        }

        /* 1. Esta é a classe CRÍTICA: controla o tabuleiro onde o fundo está colado */
.h5p-container .h5p-dragquestion-board {
    width: 100% !important;
    height: 100% !important;
    background-size: 100% 100% !important; /* Força o SVG a esticar até tocar nas laterais */
}

/* 2. Esta classe remove o limite de largura que o H5P impõe ao jogo */
.h5p-container .h5p-dragquestion {
    max-width: none !important;
    width: 100% !important;
}

/* 3. Garante que o contentor de posicionamento interno não tem margens */
.h5p-container .h5p-dragquestion-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

         /* 4. Estilo do Footer */
        footer {
            background-color: #121824;
            border-top: 2px solid #1f293d;
            padding: 15px;
            text-align: center;
            width: 100%;
        }

        footer p {
            font-size: 0.8rem;
            color: #637592;
        }

 /* Substitui apenas o teu bloco @media atual por este: */
@media (max-width: 768px) {
    /* 1. Reduz o tamanho do texto no cabeçalho */
    header {
        padding: 12px 10px !important;
    }
    
    header h1 { 
        font-size: 1.1rem !important; 
    }
    
    header p {
        font-size: 0.8rem !important;
    }

    /* 2. Puxa o jogo para o topo em vez de o centrar verticalmente na página */
    main { 
        padding: 10px 5px !important; 
        align-items: flex-start !important; /* Elimina as margens vazias gigantes acima/abaixo */
    }

    /* 3. Garante que o jogo ocupa a largura máxima sem quebrar o aspeto visual */
    .h5p-container { 
        border-radius: 8px !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}



/* Oculta completamente a barra de feedback de texto azul do H5P no fundo */
.h5p-question-feedback,
.h5p-question-feedback-container,
.h5p-question-feedback-content {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 1. Altera esta classe (remove a linha no fundo do conteúdo) */
.h5p-question-content {
  border-bottom: none !important;
}

/* 2. E altera também esta classe (remove a linha no topo dos botões) */
.h5p-question-buttons {
  border-top: none !important;
}

/* Oculta de forma absoluta a barra de pontuação e o progresso do H5P */
.h5p-question-scorebar,
.h5p-question-scorebar-container,
.h5p-scorebar,
.h5p-score-bar,
.h5p-joubelui-scorebar,
.h5p-dragquestion-scorebar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}