.jogoNivelComTutorial{position:relative}
.jogoNivelComTutorial .jogoNivelCard{padding-bottom:62px}
.botaoTutorialGeotetris{position:absolute;bottom:14px;left:14px;width:calc(100% - 28px);min-height:38px;border:1px solid #b7d8ee;border-radius:10px;background:#eaf5fc;color:#1769aa;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.botaoTutorialGeotetris:hover{background:#d8edfb}
.botaoTutorialGeotetris:focus-visible,.tutorialJogo button:focus-visible{outline:3px solid #218cbc;outline-offset:3px}
body.tutorialGeoAberto{overflow:hidden}
.tutorialJogo{box-sizing:border-box;width:min(640px,calc(100% - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:26px;border:1px solid #cce3f2;border-radius:22px;background:#fff;color:#17345f;box-shadow:0 24px 80px #17345f40;font:inherit;text-align:left;overflow-y:auto}
.tutorialJogo::backdrop{background:rgba(16,35,57,.6);backdrop-filter:blur(3px)}
.tutorialGeoTopo{display:flex;align-items:start;justify-content:space-between;gap:12px}
.tutorialGeoTopo span{color:#218cbc;font-size:.72rem;font-weight:700;letter-spacing:.12em}
.tutorialJogo h2{margin:5px 0 0;font-size:1.65rem;color:#17345f;text-align:left}
.tutorialJogo h3{margin:20px 0 12px;font-size:1.05rem}
.tutorialGeoFechar{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#edf5fa;color:#17345f;font-size:26px;cursor:pointer}
.tutorialGeoResumo{line-height:1.55;color:#52677d}
.tutorialGeoPassos{display:grid;gap:14px;margin:20px 0;padding-left:26px}
.tutorialGeoPassos li::marker{color:#218cbc;font-weight:700}
.tutorialJogo p{font-size:.94rem;line-height:1.5}
.tutorialGeoPassos p{margin:4px 0 0;color:#52677d}
.tutorialGeoControles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tutorialGeoControles>div{padding:15px;border-radius:12px;background:#f2f7fb}
.tutorialGeoControles p{margin:10px 0 0;color:#52677d}
.tutorialGeoControles kbd{display:inline-block;padding:2px 6px;border:1px solid #cbdce8;border-radius:5px;background:white;font-size:.8rem;color:#17345f}
.tutorialGeoDica{padding:12px;border-left:3px solid #26a447;background:#f0f9f3;border-radius:6px}
.tutorialGeoEntendi{display:block;width:100%;min-height:44px;border:0;border-radius:10px;background:#1769aa;color:white;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:520px){.tutorialJogo{padding:18px}.tutorialGeoControles{grid-template-columns:1fr}.tutorialJogo h2{font-size:1.35rem}.botaoTutorialGeotetris{bottom:10px;left:10px;width:calc(100% - 20px)}}

/* Tutorial visual de Geométricos Soma */
.tutorialJogo.tutorialSomaVisual{width:min(940px,calc(100% - 28px))}
.somaTour{display:grid;grid-template-columns:1fr 250px 1fr;grid-template-areas:"regra regra regra" ". enunciado ." "numeros tabuleiro somas" ". resultado ." "fim fim fim";gap:18px 24px;align-items:center;padding:18px;background:#f4f8fc;border:1px solid #e1ebf3;border-radius:18px}
.somaBalao{position:relative;padding:14px;background:#fff;border:1px solid #bfd9ec;border-radius:16px;box-shadow:0 4px 12px #17345f09}
.somaBalao:after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-right:1px solid #bfd9ec;border-bottom:1px solid #bfd9ec}
.somaBalao strong{display:flex;align-items:center;gap:8px;font-size:.95rem}
.somaBalao strong>span{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:#1769aa;color:white;font-size:.8rem}
.tutorialJogo .somaBalao p{margin:8px 0 0;font-size:.86rem;color:#52677d;line-height:1.45}
.somaBalao small{display:block;margin-top:9px;font-size:.74rem;color:#6a7f92;line-height:1.4}
.somaBalaoRegra{grid-area:regra;justify-self:center;max-width:460px}
.somaBalaoRegra:after{bottom:-7px;left:calc(50% - 6px);transform:rotate(45deg)}
.somaTelaRegra{grid-area:enunciado;text-align:center;padding:10px;background:#e5f2ff;border-radius:10px;border:1px dashed #8dbbdf}
.somaTelaRegra small,.somaTelaResultado>small{display:block;font-size:.62rem;letter-spacing:.06em;color:#536f86;margin-bottom:7px}
.somaTelaRegra b{font-size:.8rem;line-height:1.5}
.somaBalaoNumeros{grid-area:numeros}
.somaBalaoNumeros:after{right:-7px;top:30px;transform:rotate(-45deg)}
.somaBalaoSomas{grid-area:somas}
.somaBalaoSomas:after{left:-7px;top:30px;transform:rotate(135deg)}
.somaTabuleiro{grid-area:tabuleiro;width:100%;margin:0;min-width:0}
.somaGrade{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #987b55;box-shadow:0 5px 16px #17345f15}
.somaGrade>span{position:relative;display:grid;place-items:center;aspect-ratio:1;color:#151b22;font:clamp(28px,4vw,42px)/1 Arial,sans-serif;border:1px solid #b4ad9f;background:#ecebe5}
.somaGrade>span:nth-child(even){background:#ffe9c5}.somaGrade>span:nth-child(5){background:#c5edf9}
.somaGrade>.somaCelulaDestaque{box-shadow:inset 0 0 0 3px #168bc1;background:#e8f7ff}
.somaCelulaDestaque small{position:absolute;bottom:3px;right:6px;color:#168bc1;font-size:20px}
.somaTabuleiro figcaption{text-align:center;color:#708599;font-size:.65rem;margin-top:8px}
.somaContas{margin-top:8px;font-size:.95rem;line-height:1.8;white-space:nowrap}.somaContas b{color:#188747}
.somaTelaResultado{grid-area:resultado;text-align:center}
.somaTelaResultado>b{display:inline-block;padding:8px 20px;background:#28a745;border-radius:7px;color:white;font-size:1.4rem}
.somaBalaoResultado{grid-area:fim;justify-self:center;max-width:510px}
.somaBalaoResultado:after{top:-7px;left:calc(50% - 6px);transform:rotate(225deg)}
.tutorialJogo .somaTourNota{font-size:.78rem;color:#708599;text-align:center;margin:14px 0}
@media(max-width:720px){.somaTour{grid-template-columns:minmax(0,1fr);grid-template-areas:"regra" "enunciado" "numeros" "tabuleiro" "somas" "resultado" "fim";padding:12px;gap:16px}.somaTabuleiro{max-width:230px;justify-self:center}.somaTelaRegra{width:auto;justify-self:stretch}.somaBalaoNumeros:after{top:auto;right:calc(50% - 6px);bottom:-7px;transform:rotate(45deg)}.somaBalaoSomas:after{top:-7px;left:calc(50% - 6px);transform:rotate(225deg)}.somaBalao{max-width:none;justify-self:stretch}.somaGrade>span{font-size:34px}}

/* Tutorial visual de Geotetris */
.tutorialJogo.tutorialTetrisVisual{width:min(940px,calc(100% - 28px))}
.tetrisTour{display:grid;grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);grid-template-areas:"peca tabuleiro lateral" "sombra tabuleiro lateral" "linha tabuleiro lateral";gap:18px 24px;align-items:center;padding:20px;border:1px solid #e1ebf3;border-radius:18px;background:#f4f8fc}
.tetrisTourTabuleiro{grid-area:tabuleiro;margin:0;min-width:0}
.tetrisTourTabuleiro>svg{display:block;width:100%;height:auto}
.tetrisTourTabuleiro figcaption{font-size:.65rem;text-align:center;color:#708599;margin-top:8px}
.tetrisBalaoPeca{grid-area:peca}.tetrisBalaoSombra{grid-area:sombra}.tetrisBalaoLinha{grid-area:linha}
.tetrisBalaoPeca:after,.tetrisBalaoSombra:after,.tetrisBalaoLinha:after{right:-7px;top:28px;transform:rotate(-45deg)}
.tetrisTourLateral{grid-area:lateral;display:grid;gap:12px;align-self:start}
.tetrisTourPlacar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:2px solid #53677b;border-radius:8px;background:white}
.tetrisTourPlacar small,.tetrisTourProxima>small{font-size:.65rem;color:#53677b;font-weight:bold;letter-spacing:.05em}.tetrisTourPlacar b{color:#c0392b;font-size:1.2rem}
.tetrisTourProxima{padding:12px;text-align:center;border:2px solid #53677b;border-radius:8px;background:white}.tetrisTourProxima>small{display:block}.tetrisTourProxima svg{display:block;width:80px;height:65px;margin:8px auto 0}
.tetrisBalaoProxima:after{top:-7px;left:calc(50% - 6px);transform:rotate(225deg)}
.tetrisTourTeclas{display:grid;grid-template-columns:repeat(3,40px);gap:7px;justify-content:center;margin-top:5px}.tetrisTourTeclas span{display:grid;place-items:center;height:40px;border-radius:8px;background:#2c3e50;color:white;font-size:24px}.tetrisTourTeclas span:nth-child(4){grid-column:2}
.tetrisTourLegenda{text-align:center;font-size:.7rem;color:#708599}
.tetrisTourControles{margin-top:18px}
@media(max-width:720px){.tetrisTour{grid-template-columns:minmax(0,1fr);grid-template-areas:"peca" "tabuleiro" "sombra" "linha" "lateral";padding:12px;gap:16px}.tetrisTourTabuleiro{width:210px;max-width:100%;justify-self:center}.tetrisBalaoPeca:after{top:auto;bottom:-7px;right:calc(50% - 6px);transform:rotate(45deg)}.tetrisBalaoSombra:after,.tetrisBalaoLinha:after{top:-7px;right:calc(50% - 6px);transform:rotate(225deg)}.tetrisTourLateral{width:100%}.tetrisTourControles{grid-template-columns:1fr}}

.tutorialGeoCapa img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;background:white;border-radius:12px}
.tutorialGeoExemplos{display:grid;gap:8px;margin-top:10px;color:#188747;font-size:.88rem;line-height:1.5;overflow-wrap:anywhere}
.tutorialAcaoIlustrada{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;color:#1769aa;font-weight:700}
.tutorialMiniPeca{display:grid;place-items:center;min-width:42px;min-height:42px;padding:5px;border:2px solid #8dbbdf;border-radius:9px;background:white;font-size:1.4rem}
.tutorialMiniAlvo{border-style:dashed;background:#e5f2ff}
.tutorialCapaAlternativa{display:grid;justify-items:center;gap:12px;padding:24px;background:white;border-radius:12px;text-align:center;color:#1769aa;overflow-wrap:anywhere}
.tutorialCapaAlternativa>span{font-size:3rem}

/* Capturas reais da partida com explicações ligadas às áreas da tela. */
.tutorialJogo.tutorialCapturaReal{width:min(1200px,calc(100% - 28px))}
.tutorialCapturaLayout{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr);align-items:start;gap:22px}
.tutorialCapturaLayout.tutorialSemCaptura{grid-template-columns:minmax(0,1fr)}
#tutorialJogo_divisoresComum .tutorialCapturaLayout{grid-template-columns:minmax(0,1fr)}
#tutorialJogo_divisoresComum .tutorialPartida{width:100%;max-width:760px;box-sizing:border-box;justify-self:center}
.tutorialPartida{margin:0;min-width:0;padding:12px;background:#f4f8fc;border:1px solid #e1ebf3;border-radius:16px}
.tutorialPartidaImagem{position:relative;isolation:isolate}
.tutorialPartidaImagem>img{display:block;width:100%;height:auto;border-radius:12px}
.tutorialPartida figcaption{margin:12px 2px 0;color:#52677d;font-size:.75rem;line-height:1.5}
.tutorialPartida figcaption a{display:inline-block;margin-top:6px;color:#1769aa;font-weight:700}
.tutorialDestaqueArea{position:absolute;box-sizing:border-box;pointer-events:none;border:2px solid transparent;border-radius:7px;transition:background .15s,border-color .15s}
.tutorialDestaqueArea.ativo{border-color:#1769aa;background:#168bc10a;box-shadow:0 0 0 2px #fff9}
.tutorialMarcador{position:absolute;top:-10px;left:-10px;display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;pointer-events:auto;border:2px solid white;border-radius:50%;background:#1769aa;color:white;box-shadow:0 2px 7px #17345f55;font:700 15px Arial,sans-serif;cursor:pointer}
.tutorialMarcador[aria-pressed=true]{background:#b64b08;transform:scale(1.1)}
#tutorialJogo_vizinhosNumeros1f [data-area="regra"] .tutorialMarcador{left:auto;right:-10px}
#tutorialJogo_trilhaContinuaSubtracao [data-area="regra"] .tutorialMarcador,#tutorialJogo_trilhaContinuaMultiplicacao [data-area="regra"] .tutorialMarcador,#tutorialJogo_trilhaContinuaDivisao [data-area="regra"] .tutorialMarcador{left:auto;right:-10px}
.tutorialPartes{display:grid;gap:12px;list-style:none;margin:0;padding:0;min-width:0}
.tutorialPartes li{padding:13px;border:1px solid #ccdeec;border-radius:13px;background:#f9fcff;transition:border-color .15s,background .15s}
.tutorialPartes li.ativo{border-color:#1769aa;background:#edf6ff;box-shadow:inset 3px 0 #1769aa}
.tutorialPartes button{display:flex;align-items:center;gap:9px;width:100%;padding:0;border:0;background:transparent;color:#17345f;text-align:left;font:inherit;font-weight:700;cursor:pointer}
.tutorialPartes button>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#1769aa;color:white;font-size:.85rem}
.tutorialJogo .tutorialPartes p{margin:9px 0 0;font-size:.86rem;line-height:1.55;color:#405b72}
.tutorialConclusao{padding:12px 15px;background:#f0f9f3;border-radius:10px;color:#315a41}
.tutorialCapturaReal .somaTourNota{font-size:.78rem;color:#52677d;text-align:center;margin:14px 0}
@media(max-width:850px){.tutorialCapturaLayout{grid-template-columns:minmax(0,1fr)}.tutorialPartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tutorialJogo.tutorialCapturaReal{padding:16px;width:calc(100% - 16px)}.tutorialPartes{grid-template-columns:minmax(0,1fr)}.tutorialPartida{padding:10px}.tutorialMarcador{width:28px;height:28px;min-height:28px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.tutorialDestaqueArea,.tutorialPartes li{transition:none}}
