:root {
  --azul-profundo: #23678f; --azul-suave: #e8f6ff; --dourado: #e9b949;
  --dourado-claro: #f8d978; --dourado-borda: #a86f13; --texto: #304452;
  --sombra: 0 18px 50px rgba(45, 99, 128, .14);
  --unidade-pagina-um: clamp(28px,4.2vh,38px);
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--texto); background: radial-gradient(circle at 15% 12%, rgba(255,255,255,.95) 0 5%, transparent 18%), linear-gradient(145deg, #eefaff 0%, #e4f6ff 52%, #eff9ec 100%); }
button { font: inherit; }
.pagina-combinando { width: min(1180px, calc(100% - 32px)); min-height: 100svh; margin: 0 auto; padding: 12px 0 18px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.navegacao-ambiente { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.controles-apresentacao { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
.botao-pular { font-size: .94rem; padding: .55rem .9rem; }
.cartao-tela { width: 100%; min-height: 0; border: 1px solid rgba(88,155,191,.2); border-radius: 32px; background: rgba(255,255,255,.94); box-shadow: var(--sombra); }
.introducao { align-self: center; min-height: 0; max-height: calc(100svh - 118px); overflow: hidden; padding: clamp(36px,7vw,84px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cubinho { border: 2px solid var(--dourado-borda); border-radius: 7px; background: linear-gradient(135deg,#ffe99c,var(--dourado)); box-shadow: inset -4px -4px 0 rgba(145,91,7,.13),0 5px 10px rgba(145,91,7,.16); }
.identificador { margin: 0 0 10px; color: var(--azul-profundo); font-size: clamp(.82rem,1.5vw,1rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1,h2 { color: #244d65; }
h1 { max-width: 850px; margin: 0; font-size: clamp(2.35rem,7vw,5rem); line-height: .98; letter-spacing: -.045em; }
.introducao .texto-destaque { max-width: 700px; margin: 26px auto 34px; font-size: clamp(1.05rem,2vw,1.35rem); line-height: 1.55; }
.apresentacao { padding: clamp(16px,2.2vw,28px); display: flex; align-items: center; justify-content: center; }
.bloco-pedagogico { width: min(1000px,100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px,1.6vh,16px); }
.cabecalho-apresentacao { text-align: center; }
.cabecalho-apresentacao h2 { margin: 0; font-size: clamp(1.5rem,3vw,2.25rem); }
.narracao-visivel { min-height: 2.8em; max-width: 820px; margin: 12px auto 0; font-size: clamp(1rem,1.8vw,1.2rem); line-height: 1.4; }
.palco { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1.8vh,18px); }
.conjunto-representacoes { max-width: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(24px,4vw,56px); }
.simbolo { flex: 0 0 auto; min-width: clamp(72px,10vw,130px); display: grid; place-items: center; }
.algarismo-atual,.numero-dez { color: #296d96; font-size: clamp(4.2rem,11.2vw,7.7rem); font-weight: 900; line-height: 1; transition: transform .35s ease,color .35s ease,filter .35s ease; }
.algarismo-atual.em-destaque,.numero-dez>.em-destaque,.numero-dez.formado { color: #0f75b4; filter: drop-shadow(0 8px 14px rgba(45,142,198,.25)); transform: scale(1.12); }
.area-material { flex: 0 0 clamp(110px,14vw,160px); width: clamp(110px,14vw,160px); min-height: 0; padding: clamp(8px,1.5vw,18px); display: grid; grid-template-rows: 1fr auto; place-items: center; overflow: visible; }
.area-unidades { flex: 0 0 clamp(110px,14vw,160px); width: clamp(110px,14vw,160px); min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.palco>.narracao-visivel { width: 100%; text-align: center; }
.fila-unidades { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 2px; }
.cubinho { flex: 0 1 58px; width: clamp(32px,5.2vw,58px); aspect-ratio: 1; animation: cubinho-entra .45s cubic-bezier(.2,.85,.25,1.25) both; }
.fila-unidades .cubinho { flex: 0 0 var(--unidade-pagina-um); width: var(--unidade-pagina-um); height: var(--unidade-pagina-um); }
.estado-vazio { margin: 0; color: #587383; font-weight: 700; }
.legenda-material { min-height: 1.5em; margin: 16px 0 0; font-weight: 800; color: var(--azul-profundo); }
.dezena { width: clamp(54px,7vw,72px); border: 3px solid var(--dourado-borda); border-radius: 8px; overflow: hidden; background: var(--dourado); box-shadow: 0 12px 22px rgba(145,91,7,.2); animation: dezena-entra .65s ease both; transition: transform .3s ease,outline .3s ease; }
.dezena span { display: block; height: clamp(22px,3.1vh,32px); border-bottom: 2px solid var(--dourado-borda); background: linear-gradient(90deg,var(--dourado-claro),var(--dourado)); }
.dezena span:last-child { border-bottom: 0; }
.barra-dezena { width: var(--unidade-pagina-um); animation-name: dezena-formada; }
.barra-dezena span { height: var(--unidade-pagina-um); }
.dezena.em-destaque { outline: 8px solid rgba(78,183,111,.25); transform: scale(1.05); }
.palco[data-phase="ten"] .area-unidades,
.palco[data-phase="symbol-ten"] .area-unidades { display: none; }
.palco[data-phase="digits"] .area-material,
.palco[data-phase="tenth"] .area-material { display: none; }
.palco[data-phase="tenth"] .simbolo,
.palco[data-phase="ten"] .simbolo { display: none; }
.numero-dez { display: flex; align-items: center; justify-content: center; gap: clamp(44px,7vw,92px); }
.numero-dez>span { transition: transform .75s ease,color .3s ease,filter .3s ease; }
.numero-dez.unindo,.numero-dez.formado { gap: 0; }
.acoes-finais { min-height: 0; display: flex; justify-content: center; align-items: center; margin-top: 2px; }
.acoes-finais [aria-disabled="true"] { cursor: default; }
[hidden] { display: none !important; }
.sem-animacao { animation: none !important; transition: none !important; }
@keyframes cubinho-entra { from { opacity: 0; transform: translateY(-24px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dezena-entra { from { opacity: 0; transform: rotate(90deg) scale(.75); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes dezena-formada { from { opacity: .35; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Página 2: uma única composição evolui de 11 a 20. */
.pagina-dois {
  padding: clamp(16px,2.2vw,28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloco-pagina-dois { width: min(1080px,100%); }
.palco-pagina-dois {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px,1.8vh,18px);
  overflow: visible;
}
.conjunto-pagina-dois { width: 100%; }
.simbolo-pagina-dois { flex: 0 0 auto; min-width: clamp(90px,12vw,160px); display: grid; place-items: center; }
.numero-pagina-dois {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px,8vw,104px);
  color: #296d96;
  font-size: clamp(4.2rem,11.2vw,7.7rem);
  font-weight: 900;
  line-height: 1;
  transition: gap .75s ease, transform .35s ease, color .35s ease, filter .35s ease;
}
.numero-pagina-dois>span { transition: transform .3s ease,color .3s ease,filter .3s ease; }
.numero-pagina-dois.unindo,.numero-pagina-dois.formado { gap: 0; }
.numero-pagina-dois.formado { color: #0f75b4; filter: drop-shadow(0 8px 14px rgba(45,142,198,.25)); transform: scale(1.1); }
.numero-pagina-dois>span.em-destaque { color: #0f75b4; filter: drop-shadow(0 8px 14px rgba(45,142,198,.25)); transform: scale(1.14); }
.material-pagina-dois {
  flex: 0 1 660px;
  width: min(660px,64vw);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px,5vw,62px);
  padding: 0;
  transition: box-shadow .3s ease;
}
.dezenas-pagina-dois { display: flex; align-items: center; gap: clamp(12px,2vw,22px); flex: 0 0 auto; }
.barra-pagina-dois { animation: none; }
.segunda-dezena-formada { animation: dezena-entra .65s ease both; }
.unidades-pagina-dois { transition: outline .3s ease,background .3s ease; }
.unidades-pagina-dois.em-destaque { outline: 7px solid rgba(78,183,111,.25); background: rgba(255,255,255,.55); }
.legenda-pagina-dois { margin: 0; text-align: center; }

.pagina-tres { min-height: min(640px,calc(100svh - 130px)); padding: clamp(12px,2vw,24px); display: flex; align-items: flex-start; justify-content: center; }
.bloco-pagina-tres { width: min(980px,100%); gap: clamp(18px,3vh,30px); }
.faixa-numeros { width: min(900px,100%); display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: clamp(5px,1vw,10px); }
.espaco-numero { min-height: clamp(42px,6vw,62px); display: grid; place-items: center; border: 2px dashed #a9c8d8; border-radius: 12px; color: #296d96; background: #f8fcfe; font-size: clamp(1rem,2.3vw,1.5rem); font-weight: 900; }
.espaco-numero.preenchido { border-style: solid; border-color: #78b68b; background: #effaf1; }
.atividade-formacao { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.instrucao-atividade { min-height: 1.5em; margin: 0; text-align: center; font-size: clamp(1.1rem,2vw,1.35rem); font-weight: 800; }
.numero-em-formacao { display: flex; align-items: center; gap: clamp(16px,3vw,28px); color: #296d96; font-size: clamp(3.8rem,9vw,6.5rem); font-weight: 900; line-height: 1; }
.algarismo-escolha { min-width: .72em; border-bottom: 5px solid #78b68b; text-align: center; }
.opcoes-algarismos { display: grid; grid-template-columns: repeat(10,minmax(38px,1fr)); gap: 8px; width: min(680px,100%); }
.botao-algarismo-atividade { min-height: 48px; padding: .4rem; color: #296d96; background: #fff; border: 2px solid #9dcfe3; font-size: 1.35rem; font-weight: 900; }
.botao-algarismo-atividade:hover,.botao-algarismo-atividade:focus-visible { border-color: #4e9dbe; background: #eefaff; }
.feedback-atividade { min-height: 1.5em; margin: 0; color: #287848; font-weight: 800; }
.conclusao-atividade { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.conclusao-atividade p { margin: 0; font-size: clamp(1.1rem,2vw,1.35rem); font-weight: 800; }
.acoes-atividade { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
[hidden] { display: none !important; }