quiz-ius/css/custom.css

/* Estilos Customizados (Whitelabel) */
:root {
  --cor-fundo-principal: #8EC33D;
  --cor-fundo-escuro: #1E3B70;
  --cor-texto-principal: #FFFFFF;
  --cor-texto-secundario: #263D6B;
  --cor-titulos: #A1C633;
  --cor-iniciar-bg: #A1C633;
  --cor-iniciar-texto: #FFFFFF;
  
  --cor-alt-a: #1E3B70;
  --cor-alt-b: #8EC33D;
  --cor-alt-c: #A02B21;
  --cor-alt-d: #1E3B70;
}

html {
  font-size: 1.7vh;
}

body, .pane, .view {
  background-color: transparent !important;
}

.custom-theme {
  font-family: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.custom-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: transparent;
  background-size: 15vh 15vh;
  background-repeat: repeat;
  background-position: top left;
  z-index: 1; /* pattern sobre as cores */
  pointer-events: none; /* não interferir no clique */
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.start-screen {
  background-color: var(--cor-fundo-escuro);
}

.game-screen {
  background-color: var(--cor-fundo-principal);
}

.end-screen {
  background-color: var(--cor-fundo-resultado);
}

.screen > * {
  position: relative;
  z-index: 2; /* conteúdo sobre o pattern */
}

.title-box {
  width: 90%;
}
.title-box img {
  width: 100%;
}

.logo-container {
  margin-bottom: 1rem;
  text-align: center;
  width: 130%;
}

.logo-top {
  max-width: 60%;
}

.logo-top-small {
    max-width: 74%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}


.btn-iniciar {
    background-color: var(--cor-iniciar-bg);
    color: var(--cor-iniciar-texto);
    border: 0.15rem solid #fff;
    border-radius: 1rem;
    font-size: 3.5rem;
    font-weight: 600;
    padding: 1rem 3rem;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);

    text-transform: uppercase;
    margin-top: 5vh;
}

/* Question Screen */
.question-box {
    background-color: #FFFFFF; /* Folhinha branca */
    border-radius: 4rem 1rem;
    padding: 1.5rem;
    line-height: 2.3rem;
    width: 90%;
    margin-bottom: 1.5rem;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.question-box p {
    color: var(--cor-texto-secundario); /* Fonte verde */
    font-family: 'General Sans' !important;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.answers-container {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.answer-btn {
  display: flex;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s;
}

.answer-btn:active {
  transform: scale(0.98);
}

.letter-box {
  width: 20%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  font-weight: bold;
  color: var(--cor-texto-secundario); /* Fonte verde */
  border-right: 0.1rem solid rgba(0,0,0,0.05);
}

.text-box {
width: 80%;
    padding: 1rem;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    color: var(--cor-texto-secundario); /* Fonte verde */
    font-weight: 600;
    line-height: 0.9em;
}

/* Cores das alternativas (Dinâmicas) */
.alt-A { background-color: var(--cor-alt-a); }
.alt-B { background-color: var(--cor-alt-b); }
.alt-C { background-color: var(--cor-alt-c); }
.alt-D { background-color: var(--cor-alt-d); }

/* Feedback Resposta */
.resposta-correta .text-box, .resposta-correta .letter-box { background-color: var(--cor-acerto) !important; color: #fff !important; }
.resposta-incorreta .text-box, .resposta-incorreta .letter-box { background-color: var(--cor-erro) !important; color: #fff !important; }

/* Result Screen */
.result-title-box {
  background-color: #fff;
  border-radius: 4rem 1rem;
  margin-top: 16vh;
  padding: 1rem 2rem;
  margin-bottom: 3vh;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}

.result-title-box h1 {
  color: var(--cor-texto-secundario); /* Fonte verde */
  font-size: 4rem;
  font-weight: bold;
  margin: 0;
}

.score-box {
  background-color: #FFFFFF; /* Quadrado branco */
  border-radius: 1.5rem;
  padding: 2rem;
  width: 80%;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

.score-box p {
  color: var(--cor-texto-secundario); /* Fonte verde */
  font-size: 2rem;
  margin: 0;
}

.score-box h2 {
  color: var(--cor-fundo-resultado); /* Fonte verde escura */
  font-size: 8rem;
  font-weight: bold;
  margin: -0.5rem 0;
}

/* Transições */
#transition {
  z-index: 9999;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--cor-fundo-principal);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Forçar o formato 9:16 --- */
html {
  background-color: #000;
}

body {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100vw !important;
  height: 100vh !important;
  max-width: 56.25vh !important; /* 9/16 = 0.5625 */
  max-height: 177.7778vw !important; /* 16/9 = 1.7777 */
  overflow: hidden;
  margin: 0 !important;
  background-color: var(--cor-fundo-principal) !important;
}

/* --- Modo Debug (Simulação Real 1080x1920 em Monitor Horizontal) --- */
html.debug-mode {
    /* Força o container em 9:16 baseado na altura total do monitor */
    height: 100vh !important;
    width: 56.25vh !important; /* (1080 / 1920 * 100) = 56.25vh */
    
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    
    /* Centraliza e rotaciona -90deg para teste em monitor widescreen */
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    transform-origin: center center !important;
    
    /* Auxílio visual para delimitar a área da TV */
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 0 5rem rgba(0,0,0,0.8) !important;
    background-color: #000 !important;
    overflow: hidden !important;
}

html.debug-mode body {
  /* No Modo Debug, 1vh refere-se à altura desse container simulado */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  top: 0 !important;
  left: 0 !important;
  position: relative !important;
}


.custom-bg-pattern {
    background-image: url(../img/quiz_patternBG.png);
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 26vh;
    opacity: 50%;
}