:root { --azul-reta: #176b87; --azul-suave: #dff3ff; --verde-suave: #e4f6df; --texto-reta: #30434c; --foco-reta: #7b46b3; --linha-reta: #9fc9d9; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; color: var(--texto-reta); background: linear-gradient(145deg, #eefaff, #f2faed); font-family: system-ui, sans-serif; }
.pagina-reta { width: min(1180px, calc(100% - 28px)); min-height: 100vh; margin: auto; padding: 14px 0 30px; }
.navegacao-ambiente { position: fixed; z-index: 100; inset-block-start: 12px; inset-inline: 12px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.navegacao-ambiente .botao { min-width: 112px; min-height: 50px; background: rgb(255 255 255 / 96%); border-color: #bddce9; box-shadow: 0 7px 18px rgb(47 93 113 / 14%); cursor: pointer; }
.navegacao-ambiente .botao { pointer-events: auto; }
.cartao-tela { min-height: calc(100vh - 44px); border: 3px solid #fff; border-radius: 32px; background: rgb(255 255 255 / 94%); box-shadow: 0 18px 50px rgb(53 102 122 / 14%); }
.acolhimento { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 28px; padding: clamp(28px, 6vw, 68px); }
.acolhimento h1, .escolha-faixa h1 { margin: .18em 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.previa-reta { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 10px; width: min(100%, 500px); justify-self: center; padding: 20px; border-radius: 26px; background: var(--azul-suave); }
.previa-reta span { display: grid; place-items: center; min-height: 76px; border: 3px solid #bad8e4; border-radius: 17px; color: var(--azul-reta); background: #fff; font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 950; }
.botao-grande { min-height: 58px; margin-top: 12px; font-size: 1.08rem; cursor: pointer; }
.escolha-faixa { display: grid; align-content: center; justify-items: center; gap: 12px; padding: clamp(28px, 6vw, 68px); text-align: center; }
.opcoes-faixa { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 18px; width: min(100%, 920px); margin-top: 18px; }
.opcao-faixa { min-height: 124px; border: 3px solid #bad8e4; border-radius: 24px; color: var(--azul-reta); background: linear-gradient(145deg, #fff, var(--azul-suave)); font: 950 clamp(2rem, 5vw, 3.3rem)/1 system-ui, sans-serif; cursor: pointer; }
.atividade { display: grid; grid-template-rows: auto auto auto minmax(0, auto); align-content: center; gap: clamp(9px, 1.6vh, 15px); padding: clamp(12px, 2.2vw, 24px); }
.cabecalho-atividade { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; }
.cabecalho-atividade h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.35rem); text-align: center; }
.cabecalho-atividade .botao { min-height: 46px; padding-block: 8px; }
.orientacao-atividade { display: grid; justify-items: center; gap: 3px; min-height: 52px; text-align: center; }
.instrucao { margin: 0; font-size: clamp(1.15rem, 2.5vw, 1.65rem); font-weight: 850; }
.feedback { min-height: 1.35em; margin: 0; color: #6e3b20; font-weight: 750; }
.reta-numerica { position: relative; display: grid; grid-template-columns: repeat(10, minmax(52px, 1fr)); gap: 8px; width: 100%; max-width: 1080px; margin: auto; padding: 4px; border-radius: 20px; background: repeating-linear-gradient(to bottom, transparent 0 28px, rgb(159 201 217 / 58%) 28px 34px, transparent 34px 68px); }
.posicao-reta { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; min-height: clamp(54px, 7vh, 66px); border: 3px solid #bad8e4; border-radius: 16px; color: var(--texto-reta); background: #fff; font: 950 clamp(1.45rem, 3.4vw, 2.35rem)/1 system-ui, sans-serif; }
button.posicao-reta { cursor: pointer; touch-action: manipulation; }
.numero-apresentado { border-color: #acd1df; background: #f5fbfe; }
.numero-preenchido { border-color: #72b987; background: var(--verde-suave); }
.espaco-vazio { border-style: dashed; background: #fffdf5; }
.marcador-vazio { width: 52%; border-bottom: 5px solid #98aab1; }
.area-opcoes { display: grid; justify-items: center; }
.numeros-disponiveis { display: grid; grid-template-columns: repeat(8, minmax(58px, 1fr)); gap: 8px; width: min(100%, 850px); }
.numero-disponivel { min-width: 0; min-height: clamp(54px, 7vh, 66px); border: 3px solid #bad8e4; border-radius: 16px; color: var(--azul-reta); background: #fff; font: 950 clamp(1.45rem, 3.5vw, 2.35rem)/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.numero-selecionado { border-color: var(--foco-reta); color: #56307d; background: #f5effb; box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px rgb(123 70 179 / 24%); }
.numero-disponivel:disabled { cursor: default; opacity: .62; }
.continuacao { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.continuacao .botao { min-width: 150px; }
.conclusao { display: grid; justify-items: center; gap: 6px; text-align: center; }
.conclusao h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.conclusao .texto-destaque { margin: 0; }
.falha { padding: 48px; }
.opcao-faixa:hover, .numero-disponivel:hover:not(:disabled), button.posicao-reta:hover:not(:disabled) { background: var(--azul-suave); }
.opcao-faixa:focus-visible, .numero-disponivel:focus-visible, .posicao-reta:focus-visible, .botao:focus-visible { outline: 5px solid var(--foco-reta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }