* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a2a1f; font-family: 'Segoe UI', Roboto, sans-serif; padding: 20px; }
.container { max-width: 1300px; margin: 0 auto; background: #fffaf0; border-radius: 50px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.header { background: #2a5e48; padding: 15px 25px; color: white; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tab-bar { background: #2a5e48; display: flex; gap: 8px; padding: 0 25px; flex-wrap: wrap; }
.tab-btn { background: #cddfb0; border: none; padding: 12px 25px; border-radius: 35px 35px 0 0; font-weight: bold; cursor: pointer; }
.tab-btn.active { background: #fffaf0; color: #1d6b4a; }
.tab-content { display: none; padding: 30px; }
.tab-content.active { display: block; }
.sub-tab-bar { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #eedbba; padding-bottom: 10px; }
.sub-tab-btn { background: #e0cfaa; border: none; padding: 8px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; }
.sub-tab-btn.active { background: #f5a623; color: white; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }
.card { background: white; border-radius: 35px; padding: 25px; margin-bottom: 25px; border: 1px solid #eedbba; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; align-items: center; }
.form-row label { width: 130px; font-weight: 600; color: #205e45; }
.form-row input, .form-row select, .form-row textarea { flex: 1; padding: 10px 15px; border-radius: 50px; border: 1px solid #dac98b; background: #fffcf5; }
button { background: #f5a623; border: none; padding: 10px 22px; border-radius: 40px; font-weight: bold; cursor: pointer; margin: 5px; }
.atividade-item { background: #e9f5e9; border-radius: 25px; padding: 18px; margin-bottom: 18px; border: 1px solid #c7d4b0; }
.globo-container { width: 280px; height: 280px; margin: 20px auto; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: 0 0 20px rgba(0,0,0,0.3); }
.globo-container video { width: 100%; height: 100%; object-fit: cover; }
.roleta-area { position: relative; width: 280px; height: 280px; margin: 20px auto; cursor: pointer; }
.roleta-area canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 6px #ddb86a; }
.ponteiro { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 48px solid #e74c3c; z-index: 10; }
.cortina-container { width: 100%; max-height: 220px; overflow: hidden; border-radius: 20px; background: #2c1a0a; margin: 15px 0; position: relative; }
.cortina-container video { width: 100%; }
.cortina-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; background: rgba(0,0,0,0.7); padding: 8px 16px; border-radius: 30px; font-size: 14px; z-index: 10; }
.vinheta { background: linear-gradient(135deg, #f5a623, #e74c3c); display: inline-block; padding: 10px 25px; border-radius: 50px; color: white; font-weight: bold; font-size: 20px; margin: 10px 0; animation: pulse 0.8s infinite alternate; }
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.05); opacity: 1; } }
.question-card { background: #fffaf0; border-radius: 30px; padding: 20px; margin-top: 20px; border: 1px solid #eedbba; }
.alternativa { display: block; width: 100%; margin: 10px 0; background: #ecdcaa; border: 2px solid #c7a86a; padding: 10px; border-radius: 60px; font-weight: bold; cursor: pointer; text-align: left; }
.feedback-certo { background: #2ecc71; color: white; padding: 8px; border-radius: 30px; margin-top: 12px; }
.feedback-errado { background: #e74c3c; color: white; padding: 8px; border-radius: 30px; margin-top: 12px; }
.pontuacao { background: #f5a623; display: inline-block; padding: 6px 20px; border-radius: 50px; font-weight: bold; font-size: 18px; margin-bottom: 20px; }
.auth-container { max-width: 550px; margin: 40px auto; background: #fffaf0; border-radius: 50px; padding: 35px; text-align: center; }
.logo-area { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.logo-area img { height: 55px; object-fit: contain; }
.auth-container input, .auth-container select { width: 100%; padding: 12px; margin: 10px 0; border-radius: 50px; border: 1px solid #dac98b; }
.institutional-text { font-size: 12px; color: #444; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e0cfaa; text-align: left; }
.hidden { display: none; }
.mapa-ponto-jogo { position: absolute; background: #e74c3c; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid white; font-weight: bold; transform: translate(-50%, -50%); }
.btn-som { background: #e74c3c; color: white; font-size: 18px; padding: 12px 24px; margin: 20px auto; display: block; cursor: pointer; border-radius: 50px; border: none; font-weight: bold; }