/* Missão Internet Segura — estilos da área (cor #e8590c) */
.seg { --area: #e8590c; --area-d: #b8430a; --area-bg: #fff1e6; max-width: 880px; margin: 0 auto; padding: 18px max(14px, env(safe-area-inset-right)) 56px max(14px, env(safe-area-inset-left)); }
.seg__tela[hidden] { display: none; }
.seg__painel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seg__painel p { margin: 4px 0; max-width: 56ch; font-size: 18px; }
.seg__lead { font-weight: 900; font-size: 20px !important; }
.seg__peq { color: var(--ink-soft); font-size: 16px !important; }
.seg__mascote { width: 120px; height: 120px; object-fit: contain; }
.seg__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.seg .m-btn--blue:focus-visible, .seg .m-btn:focus-visible { outline-color: var(--navy); outline-offset: 3px; }

/* Topo do jogo */
.seg__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.seg__progresso { margin: 0; font-size: 22px; color: var(--navy); }
.seg__progresso:focus { outline: none; }
.seg__escudos { display: flex; gap: 4px; flex-wrap: wrap; }
.seg__escudo { width: 28px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 8px 8px 14px 14px; border: 2px dashed #9bb0c4; color: #9bb0c4; background: #fff; }
.seg__escudo--ganho { border: 2px solid var(--area-d); background: var(--area); color: #fff; }
.seg__escudo--pulou { border: 2px solid #9bb0c4; background: #eef3f8; color: #5b7188; }
.seg__ferr { display: flex; gap: 8px; flex-wrap: wrap; }
.seg__confirma { margin-bottom: 14px; text-align: center; background: var(--area-bg); }
.seg__confirma p { margin: 0 0 6px; }

/* Situação */
.seg__situacao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .seg__situacao { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.seg__cena { background: var(--area-bg); border: 4px solid var(--navy); border-radius: 22px; padding: 14px; box-shadow: 0 6px 0 #061f3e; }
.tela { background: #fff; border: 3px solid var(--navy); border-radius: 16px; overflow: hidden; min-height: 190px; display: flex; flex-direction: column; }
.tela__barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--navy); color: #fff; font-weight: 800; font-size: 15px; }
.tela__corpo { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; flex: 1; justify-content: center; background: linear-gradient(#f3f8fd, #e4effa); }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2px solid #b6c9dc; font-size: 16px; line-height: 1.35; }
.msg b { display: block; font-size: 13px; color: var(--blue-d); margin-bottom: 2px; }
.msg--out { align-self: flex-end; background: #d9ecff; }
.msg--banner { align-self: center; max-width: 100%; text-align: center; background: #fff6cc; border: 3px solid var(--yellow-d); font-weight: 800; }
.msg--popup { align-self: center; max-width: 100%; text-align: center; background: #fff; border: 3px solid var(--area); box-shadow: 0 4px 0 var(--area-d); font-weight: 800; }
.cena__selo { align-self: center; font-size: 12px; color: #4d6479; font-weight: 700; }
.seg__conteudo { display: flex; flex-direction: column; gap: 10px; }
.seg__texto { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy); }
.seg__pergunta { margin: 0; font-size: 18px; font-weight: 900; color: var(--area-d); }

/* Opções */
.seg__opcoes { display: grid; gap: 10px; }
.seg__op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; text-align: left; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--navy);
  background: #fff; border: 3px solid var(--navy); border-radius: 16px; box-shadow: 0 4px 0 var(--navy); transition: transform .12s, background .12s; }
.seg__op:hover:not([disabled]) { background: var(--area-bg); }
.seg__op:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.seg__op:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.seg__op[disabled] { cursor: default; opacity: .75; box-shadow: 0 2px 0 var(--navy); }
.seg__op .mk { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--area-bg); border: 2px solid var(--navy); font-size: 16px; font-weight: 900; }
.seg__op--certa { opacity: 1 !important; background: #e3f6ea; border-color: #17703b; box-shadow: 0 2px 0 #17703b !important; }
.seg__op--certa .mk { background: #1f9d55; color: #fff; border-color: #17703b; }
.seg__op--pensar { opacity: 1 !important; background: #fff6cc; border-color: #8a6500; box-shadow: 0 2px 0 #8a6500 !important; }
.seg__op--pensar .mk { background: var(--yellow); border-color: #8a6500; }

/* Feedback */
.seg__feedback:empty { display: none; }
.fb { display: flex; align-items: flex-end; gap: 10px; animation: m-pop .35s ease both; }
.fb__img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.fb__balao { position: relative; flex: 1; background: #fff; border: 3px solid var(--navy); border-radius: 18px; padding: 12px 14px; font-size: 17px; line-height: 1.4; color: var(--navy); }
.fb__balao--ok { border-color: #17703b; background: #f0fbf4; }
.fb__balao--dica { border-color: #8a6500; background: #fffbea; }
.fb__titulo { display: block; font-size: 19px; font-weight: 900; margin-bottom: 4px; }
.fb__balao p { margin: 4px 0; }
.fb__prox { margin-top: 10px; }

/* Final */
.seg__regras { text-align: left; width: min(100%, 460px); margin-top: 10px; background: #fff; }
.seg__regras h2 { margin: 0 0 6px; font-size: 20px; color: var(--area-d); text-align: center; }
.seg__regras ol { margin: 0; padding-left: 26px; font-size: 18px; font-weight: 800; }
.seg__regras li { margin: 4px 0; }

/* Ajuda */
.seg__ajuda { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: #061f3eaa; }
.seg__ajuda[hidden] { display: none; }
.seg__ajudacaixa { max-width: 480px; max-height: 90vh; overflow: auto; }
.seg__ajudacaixa h2 { margin-top: 0; color: var(--area-d); }
.seg__ajudacaixa li { margin: 6px 0; font-size: 17px; }

@media (max-width: 420px) { .seg__op { font-size: 17px; } .fb__img { width: 52px; height: 52px; } }

/* respiro no topo das telas iniciais */
.seg { padding-top: clamp(18px, 7vh, 72px); }
.mem { padding-top: clamp(18px, 7vh, 72px); }