:root{
	--primary-color: #3498db; /* Azul */
	--secondary-color: #2ecc71; /* Verde (Acerto) */
	--error-color: #e74c3c; /* Vermelho (Erro) */
	--text-color: #333;
	--bg-light: #f4f7f6;
}
@media screen and (min-width:280px){
	html{margin:0;padding:0;border:0}
	body {font-family: 'Segoe UI',Tahoma, Geneva, Verdana, sans-serif;background-color:var(--bg-light);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;overflow-y:auto} 
    .wide{width:100%}
	.hidden{display:none}
    .clearfix{clear:both}	
	.block{display:block}
	.center{text-align:center}
	.flex-center{display:flex!important;justify-items:center!important;align-items:center!important;gap:4%!important}
	.half{width:50%}
	.white{color:#FFF}
	.relative{position:relative}
	.bold{font-weight:700}
	.correct-answer{background-color:green!important;color:white!important}
	.wrong-answer{background-color:red!important;color:white!important}
	.quiz-container {width:100%;background-color: white;font-size:14px;;box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);text-align:center}
    header{width:100%;background-color:navy;color:white;padding:26px 0;text-align:center}
    #logotipo{display:block;font-size:2.2em;line-heigth:40px}
	#slogan{display:block;font-size:18px;line-height:20px}
    h1{color: var(--primary-color);margin: 25px 0}
    #quiz-game{width:92%;padding:10px 4%}
	.header-quiz{width:100%;display:table;clear:both;}
	.top-img-container{height:200px}
	.top-img-container img{width:100%;height:100%;object-fit: cover;object-position:center}
	#score-display{font-size: 1.2em;font-weight: bold;color: var(--primary-color);margin-bottom: 15px}
    #score-final{color: #28a745;font-size: 1.5em;font-weight: 700;margin-top: 0;margin-bottom: 20px;line-height: 1}
	#question-text,.question-text{color:#333333;box-shadow:0 0 0 2px #CCC inset;font-size: 1.05em;line-height:1.35em;font-weight:600;margin:10px 0 25px;padding:20px 25px;width:calc(100% - 50px);display:flex;align-items:center;justify-content: center;min-height: 40px}
   	#options{width:100%}
    .question-item{width:auto; float:left;font-size:20px;padding:0 20px}
	.letter{width:20px;float:left;font-size:20px;padding:0 20px}
	.-options-container button {display: block;width: 100%;padding:20px;margin: 10px 0;border: 2px solid var(--primary-color);border-radius: 15px;background-color: white;color: var(--primary-color);font-size: 1em;cursor: pointer;transition: all 0.3s ease}
	.-options-container button:hover:not(:disabled){background-color: var(--primary-color);color: white}	
	.question-button.correct-answer .letra-opcao-moderna{background-color: var(--secondary-color);border-color: var(--secondary-color);color: white;font-weight: bold}
	.question-button.incorrect-answer .letra-opcao-moderna{background-color:var(--error-color);border-color: var(--error-color);color: white}
	.question-button:disabled{cursor:not-allowed;opacity: 0.7}
    #propaganda{width:100%;padding:15px 0;min-height:80px;-display:flex;align-items:center;justify-content:center;-box-shadow: 0 0 0 2px #CCC inset}
	#feedback-message{;font-size: 1.1em;font-weight: bold;line-height: 1.5rem}	
	#quiz-end {padding: 20px 0}	
	#quiz-end h2 {-color: #333;font-size: 1.2em}
    .quiz-end-inner{border-radius:15px}
	#quiz-end- button {background-color: var(--primary-color);color: white;padding: 14px 15px;border: none;border-radius: 5px;cursor: pointer;margin-top: 15px;transition: background-color 0.3s;font-size:14px}
	#quiz-end- button:hover{background-color: #0056b3}
	.header-quiz {width:100%;display: flex;align-items: center;justify-content: center;margin-bottom: 20px}
    .rocket-emoji{font-size: 2.1em;margin-right: 15px}   
    .score-section {margin-bottom: 15px}
    .score-text {font-size: 1em;color: #333;font-weight: 600;line-height:2.4em;background-color:orangered;margin:0}
    .quiz-title{font-size:1.6em}
    .quiz-subtitle{display:block;font-size:2em;width:100%;margin-bottom:10px!important}
    .description{text-align: center;font-size:18px;color:#000;font-weight:500;line-height:20px;margin:10px 0 20px}
    #feedback-container{width:90%;padding:18px 5%;margin: 25px 0 10px;border-radius:10px}
    .success{background-color:#CCFFE6;box-shadow: 0 0 0 2px green inset}
    .error{background-color:#ffebe6;box-shadow: 0 0 0 2px red inset}
    #quiz-explanation{width:100%;padding:0;margin: 12px auto 0;font-size:14px}
    #-show-next-question{width: 100%;margin:20px auto; border-radius:30px;padding: 20px 3%;font-size:18px;line-height:24px;font-weight:600;cursor:pointer}
    #show-next-question:hover{background-color:#CCC}
   .modern-button {width:calc(96% - 20px);margin:20px auto;padding: 25px 10px;border-radius: 30px;cursor: pointer;display:inline-block;background: linear-gradient(180deg, #A5F7FF 0%, #3CB1C9 100%);background: linear-gradient(180deg, orange 0%, orangered 100%);border: 1px solid #orangered;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.6),inset 0 -2px 0 rgba(0, 0, 0, 0.1);color:#000000;font-size:18px;font-weight:bold;text-transform:uppercase;font-family: 'Arial', sans-serif;transition: all 0.2s ease;-webkit-appearance: none;-moz-appearance:none;appearance:none;text-decoration: none}
   .modern-button:hover:not(:disabled){background:linear-gradient(180deg, #CC3600 0%, #B33000 100%);box-shadow:0 8px 20px rgba(0, 0, 0, 0.4),inset 0 1px 0 rgba(255, 255, 255, 0.7),inset 0 -2px 0 rgba(0, 0, 0, 0.2);transform: translateY(-2px)}
   .modern-button:active{background: linear-gradient(180deg, #3CB1C9 0%, #66D9EF 100%);box-shadow:0 2px 5px rgba(0, 0, 0, 0.2),inset 0 0 10px rgba(0, 0, 0, 0.4);transform: translateY(0)}
   .modern-button:hover(:disabled){background:silver!important}
   .modern-button-disabled{background:#999!important;color:#555!important}
   .action-buttons{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:5px}
   .btn{padding: 14px 25px;border:none;border-radius: 8px;font-size: 1.05em;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;font-weight: 600;text-decoration:none;display:inline-block;width:100%}
   .btn-primary{background-color: var(--primary-btn-bg);color: var(--text-light)} 
   .btn-primary:hover {background-color: var(--primary-btn-hover);transform: translateY(-2px)}
   .btn-secondary{background-color: var(--secondary-btn-bg);color: var(--text-light)}
   .btn-secondary:hover {background-color: var(--secondary-btn-hover);transform: translateY(-2px)}   
   #ranking-actions p{margin:2px 0;font-size:18px;line-height:20px}
   #save-ranking{width:100%;margin:0 0 25px}
   #save-ranking span{font-size:14px;text-align:left;display:block}
   #save-ranking input[type=text]{box-sizing:border-box;padding:10px 15px;width:100%;margin:2px auto;font-size:14px}
   #save-ranking- button{width:98%;margin-top:5px;margin:5px 1%;padding:10px 0;line-height:14px}
   #pos{font-size:18px;color:orangered;font-weight:bold;margin-top:25px}
   #save-feedback-message,#append{width:100%;height:20px;line-height:20px;font-size:12px;margin:10px auto;text-align:center}
   .quiz-completion-message{font-size:18px;font-weight:700;text-align:center;margin:10px auto 18px;display:flex;align-items:center;justify-content:center}
   .quiz-completion-message i {color: #28a745;margin-right:15px;font-size:1.8em}
   #pos p{line-height:20px;margin: 2px 0}
   .question-option {width: 100%;margin-bottom:10px;text-align: left;font-size: 17px;font-family: 'Arial', sans-serif;cursor: pointer;border: 2px solid #e0e0e0;border-radius: 12px;background-color: #ffffff;color: #333;transition: all 0.25s ease-out;display: flex;align-items: stretch;padding: 0;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05)}
   .question-option:hover:not(.selecionada){border-color: #007bff;box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);transform: translateY(-2px)}
   .letra-opcao-moderna {width: 50px;flex-shrink:0;font-weight: 700;font-size: 18px;color: #ffffff;background-color: #007bff;display: flex;justify-content: center;align-items: center;padding: 15px 0;margin: 0;border-right: 2px solid #007bff;transition: all 0.25s ease-out}
   .texto-alternativa{background-color:#cffcdb;padding: 15px 25px;flex-grow: 1;display: flex;align-items: center}
   .alternativa-btn-moderna.selecionada {border-color: #28a745;background-color: #e6ffed;color: #155724;box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);transform: scale(1.01)}
   .alternativa-btn-moderna.selecionada .letra-opcao-moderna {background-color: #28a745;border-color: #28a745;color: #ffffff}  
   #num-played{color:orangered;font-weight:600}
   
   .show-end{font-family:Arial,sans-serif;margin:0;padding:20px;background-color:#e9ecef;-display:flex;justify-content:center;align-items:center;max-width: 400px;padding: 30px 30px 0;text-align:center;-border:1px solid #ddd;border-radius:12px;background-color:#ffffff;-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);margin-bottom: 25px}
	.titulo-principal{font-size: 24px;font-weight: bold;color: #1a1a1a;margin-bottom: 30px;}
	.pontuacao-destaque{font-size: 60px;font-weight: 900;color: #28aa46; margin:2px auto 5px;line-height: 1}
    .label-pontuacao{font-size: 16px;color: #6c757d;margin: 15px auto -3px}
	.ranking{margin-bottom: 10px}
    .ranking-destaque{font-size: 20px;font-weight: bold;color: #dc3545;background-color: #fff0f0;display:inline-block;padding: 8px 15px;border-radius:8px;margin:5px auto 15px}
	#ranking-actions{display:flex;flex-direction:column;gap:15px;margin-bottom:10px}
	.btn{padding: 15px 25px;font-size: 18px;font-weight: bold;border-radius: 8px;cursor: pointer;transition: background-color 0.3s, opacity 0.3s;width: 100%}
	.btn-principal{color:white;background-color:#6f42c1;margin-top:15px;border:none}        
	.btn-principal:hover{background-color: #5d34a4}
	.btn-secundario{color: #6f42c1;background-color: #f8f9fa;border: 2px solid #6f42c1}
	.btn-secundario:hover{background-color: #e9ecef}
	.detalhes-pessoais{margin-bottom:10px;padding: 10px 0;border-top: 1px solid #CCC;border-bottom: 1px solid #CCC;color:#333}
	.detalhes-pessoais p{margin:0}
	.nome-usuario,.pontos{font-weight:bold;color:#343a40;font-size:18px;text-transform:uppercase}
	.conquista{margin-bottom:10px}
	.pontos{margin:-1px 0 0;padding:2px 0;color:#6c757d}
	.end-button-holder{width:100%;display:flex;justify-content:center;align-items:center;gap:10px}
	.end-button-holder  button{width:90%;padding:15px 3%;margin:10px auto;border-radius:10px;color:white;background-color:#6f42c1;margin-top:15px;border:none;transition: background-color 0.3s, opacity 0.3s;}
	.end-button-holder  button:hover{background-color: #5d34a4;cursor:pointer;transform: translateY(-2px)}
	.tempo{color:#6c757d;font-size:14px;margin-top:-10px}
	/*Ranking global*/
	.tabela-container{font-family: Arial, sans-serif;color: #333;display: flex;justify-content: center;width: 80%;max-width: 400px;background-color: #fff;padding: 25px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
    .tabela-container h1{text-align: center;color:#007bff;margin-bottom:20px}
    .tabela-dados{width: 86%;border-collapse: collapse;margin: 20px auto 0}
    .tabela-dados thead th {background-color: #007bff;color: white;padding: 12px;text-align: left;border: 1px solid #0056b3}
    .tabela-dados tbody td {padding: 5px 12px;border: 1px solid #ddd;text-align: left}
    .tabela-dados tbody tr:nth-child(odd) {background-color: #f9f9f9}
    .tabela-dados tbody tr:hover {background-color: #e9ecef;color:#333;cursor: pointer}       
    .tabela-dados td:last-child {text-align: right;font-weight: bold;color: #28a745}
	.dark-mode .tabela-container{color:#333}
	.dark-mode .tabela-dados tbody tr:nth-child(odd){color: #000}
	#show-global-rank{position:absolute;z-index:200;top:0;bottom:0;left:0;right:0;width:auto;height:auto;background:#EEE;display:none}
	#show-global-rank h1{margin-top:50px!important}
	.dark-mode #show-global-rank{background-color:#2f3640}
	.ranking-footer{width:80%;margin:40px auto;font-size:15px}
	#close-show-ranking{width:60%;padding:15px 50px;margin:30px auto;border-radius:10px;background-color:#5c4ac7;color:#DDD}
	#close-show-ranking:hover{background-color: #5d34a4;color:#FFF;cursor:pointer;transform: translateY(-1px)}
    .title-category{text-transform:uppercase;font-weight:bold;font-size:24px;color:orangered;padding:0;margin:15px auto -10px;font-family:Tahoma, Georgia}
}		
@media screen and (min-width:900px){    
	.quiz-container {width:90%;max-width:500px}
	#question-text,.question-text{font-size:1em;line-height:1.3em;padding:25px 7%;width:86%}
    .action-buttons {flex-direction: row;justify-content: center}
    .btn{min-width: 180px}     
    .modern-button {width:calc(96% - 80px);padding: 25px 40px}
	.score-final{font-size:1.8em}
	#quiz-end button{padding:14px 25px}
}

@media screen and (max-width:480px){
	.ranking-destaque{font-size:16px;padding: 8px 10px}
	.titulo-principal{font-size:20px}
	.show-end{max-width:100%;width:100%;padding:10px 0 0;margin:0 0 25px 0;box-shadow:none;border:none}
	.pontuacao-destaque{font-size:50px}
}
       
@keyframes fadeInScale {
    from {
       opacity: 0;
       transform: scale(0.95) translateY(20px);
    }
    to {
       opacity: 1;
       transform: scale(1) translateY(0);
	}
}