.pr { --lousa:#203b33; --lousa2:#19302a; --madeira:#5d4330; --madeira2:#3f2d1f; --giz:#ecebe2; --giz2:#b6c4ba; --risco:rgba(236,235,226,.16); --risco2:rgba(236,235,226,.34); --amarelo:#f1d36b; --verde:#a7d98b; --vermelho:#ec8a74; --azul:#93c6dc; background: url("data:image/svg+xml;utf8,"), var(--lousa2); color: var(--giz); font-family: var(--f-txt), system-ui, sans-serif; padding-top: 64px; min-height: 100vh; } .pr-wrap a { color: var(--amarelo); } .pr-wrap a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; border-radius: 2px; } .pr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .pr-quadro { margin-top: 28px; border: 12px solid var(--madeira); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--madeira2), 0 24px 60px rgba(0,0,0,.35); background: radial-gradient(60% 80% at 20% 30%, rgba(236,235,226,.05), transparent 70%), url("data:image/svg+xml;utf8,"), var(--lousa); padding: 36px 40px 40px; display: grid; gap: 28px; } @media (min-width: 900px) { .pr-quadro { grid-template-columns: 1.1fr .9fr; align-items: center; } } @media (max-width: 600px) { .pr-quadro { border-width: 8px; padding: 26px 20px 28px; } } .pr-volta { font: 600 16px var(--f-cond), sans-serif; } .pr-volta a { color: var(--giz2); text-decoration: none; } .pr-volta a:hover { color: var(--giz); } .pr-h1 { font-family: var(--f-mao), cursive; font-weight: 700; font-size: clamp(40px, 6vw, 66px); line-height: 1.04; margin: 10px 0 14px; } .pr-resumo { font-size: 19px; line-height: 1.55; color: var(--giz2); max-width: 34em; } .pr-aviso { margin-top: 18px; font: 700 19px var(--f-mao), cursive; color: var(--azul); max-width: 32em; line-height: 1.4; } .pr-diag svg { width: 100%; height: auto; display: block; } .pr-sec { padding-top: 64px; } .pr-h2 { font-family: var(--f-mao), cursive; font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; margin-bottom: 20px; } .pr-h3 { font: 600 21px var(--f-cond), sans-serif; margin-bottom: 14px; } .pr-dupla { display: grid; gap: 36px; } @media (min-width: 900px) { .pr-dupla { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; } } .pr-texto p { font-size: 17.5px; line-height: 1.7; max-width: 64ch; margin-bottom: 18px; } .pr-regras { border-left: 2px solid var(--risco2); padding-left: 22px; align-self: start; } .pr-regras-t { font: 700 23px var(--f-mao), cursive; color: var(--amarelo); margin-bottom: 14px; } .pr-regra { margin-bottom: 18px; font-size: 15px; line-height: 1.55; color: var(--giz2); } .pr-regra b { display: block; font: 700 18px var(--f-mao), cursive; color: var(--giz); margin-bottom: 2px; } .pr-selo { font: 700 15px var(--f-mao), cursive; color: var(--azul); margin-left: 8px; white-space: nowrap; } .pr-cadeia { margin-bottom: 40px; } .pr-passos { display: flex; flex-direction: column; } @media (min-width: 900px) { .pr-passos { flex-direction: row; align-items: stretch; } } .pr-passo { flex: 1 1 0; border: 1.5px solid var(--risco2); border-radius: 10px; padding: 14px 16px 16px; background: rgba(0,0,0,.1); } .pr-passo .tag { display: block; font: 700 16px var(--f-mao), cursive; color: var(--giz2); margin-bottom: 4px; } .pr-passo p { font-size: 15.5px; line-height: 1.5; } .pr-passo.decisao { border-color: var(--amarelo); } .pr-passo.decisao .tag { color: var(--amarelo); } .pr-passo.ganho { border-color: var(--verde); } .pr-passo.ganho .tag { color: var(--verde); } .pr-passo.custo { border-color: var(--vermelho); } .pr-passo.custo .tag { color: var(--vermelho); } .pr-seta { display: flex; align-items: center; justify-content: center; height: 36px; } .pr-seta svg { width: 34px; height: 34px; transform: rotate(90deg); } @media (min-width: 900px) { .pr-seta { width: 44px; height: auto; flex: 0 0 44px; } .pr-seta svg { transform: none; } } .pr-caso { margin-bottom: 44px; } .pr-caso-t { font: 700 26px var(--f-mao), cursive; margin-bottom: 8px; } .pr-linha { list-style: none; padding: 0; margin: 0 0 0 6px; border-left: 2px dashed var(--risco2); } .pr-linha li { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 10px 0 10px 22px; } .pr-linha li::before { content: ""; position: absolute; left: -7px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--giz); } .pr-quando { font: 700 17px var(--f-cond), sans-serif; color: var(--amarelo); } .pr-linha p { font-size: 16.5px; line-height: 1.55; max-width: 62ch; } .pr-desfecho { font: 400 20px var(--f-mao), cursive; color: var(--giz2); margin: 14px 0 0 30px; max-width: 58ch; line-height: 1.45; } @media (max-width: 600px) { .pr-linha li { grid-template-columns: 1fr; gap: 2px; } .pr-desfecho { margin-left: 8px; } } .pr-troca { margin-bottom: 36px; } .pr-troca-g { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--risco2); } .pr-troca-g > div { padding: 14px 20px 4px 0; } .pr-troca-g > div + div { border-left: 2px solid var(--risco2); padding-left: 20px; } .pr-troca-g h4 { font: 700 21px var(--f-mao), cursive; margin-bottom: 8px; } .pr-troca-g .g h4 { color: var(--verde); } .pr-troca-g .p h4 { color: var(--vermelho); } .pr-troca-g ul { list-style: none; padding: 0; margin: 0; } .pr-troca-g li { font-size: 15.5px; line-height: 1.5; margin-bottom: 10px; } @media (max-width: 600px) { .pr-troca-g { grid-template-columns: 1fr; } .pr-troca-g > div + div { border-left: none; border-top: 2px dashed var(--risco); padding-left: 0; } } .pr-tela { margin: 0 0 32px; } .pr-tela img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--risco2); } .pr-tela figcaption { font-size: 14px; color: var(--giz2); margin-top: 10px; line-height: 1.5; max-width: 70ch; } .pr-embreve { border: 2px dashed var(--risco2); border-radius: 12px; padding: 20px 24px; display: grid; gap: 16px; } .pr-embreve p { font-size: 15.5px; line-height: 1.55; color: var(--giz2); } .pr-embreve b { font: 700 19px var(--f-mao), cursive; color: var(--giz); margin-right: 6px; } .pr-liga { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--risco); } .pr-liga li { border-bottom: 1px solid var(--risco); } .pr-liga a { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 16px 0; text-decoration: none; color: var(--giz); } .pr-liga .n { font: 700 21px var(--f-mao), cursive; color: var(--amarelo); } .pr-liga .p { font-size: 15.5px; line-height: 1.5; color: var(--giz2); } .pr-liga a:hover .n { text-decoration: underline; } @media (max-width: 700px) { .pr-liga a { grid-template-columns: 1fr; gap: 4px; } } .pr-fim { padding: 56px 0 72px; font: 600 17px var(--f-cond), sans-serif; } /* cabeçalho e rodapé */ .pr-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; background: rgba(25,48,42,.95); backdrop-filter: blur(6px); border-bottom: 3px solid var(--madeira); } .pr-topo-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 4vw, 48px); } .pr .pr-logo { font: 700 27px var(--f-mao), cursive; color: var(--giz); text-decoration: none; line-height: 1; } .pr-logo span { color: var(--amarelo); } .pr-nav { display: none; align-items: center; gap: 24px; } @media (min-width: 820px) { .pr-nav { display: flex; } } .pr .pr-nav a { font: 600 17px var(--f-cond), sans-serif; color: var(--giz2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; } .pr .pr-nav a:hover { color: var(--giz); } .pr .pr-nav a[aria-current="page"] { color: var(--giz); border-bottom-color: var(--amarelo); } .pr a.pr-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 8px; background: var(--amarelo); color: #19302a; font: 700 17px var(--f-cond), sans-serif; text-decoration: none; white-space: nowrap; } .pr a.pr-botao:hover { filter: brightness(1.06); } .pr a.pr-botao.giz { background: transparent; color: var(--giz); border: 2px solid var(--risco2); } .pr a.pr-botao.giz:hover { border-color: var(--giz); } .pr a:focus-visible, .pr button:focus-visible, .pr input:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } .pr-rodape { background: #132620; border-top: 3px solid var(--madeira); color: var(--giz2); margin-top: 72px; } .pr-rodape-in { max-width: 1160px; margin: 0 auto; padding: 44px 24px 36px; display: grid; gap: 28px; } @media (min-width: 760px) { .pr-rodape-in { grid-template-columns: 1fr auto; } } .pr-rodape p { font-size: 15px; line-height: 1.6; max-width: 34em; } .pr-rodape nav { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: start; } .pr .pr-rodape a { color: var(--giz2); font: 600 17px var(--f-cond), sans-serif; text-decoration: none; } .pr .pr-rodape a:hover { color: var(--giz); } .pr-rodape small { display: block; grid-column: 1 / -1; border-top: 1px solid var(--risco); padding-top: 18px; font-size: 14px; } .pr .pr-pular { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--amarelo); color: #19302a; padding: 10px 16px; border-radius: 6px; } .pr .pr-pular:focus { top: 10px; } /* página do BrasManager */ .bm-hero-txt .pr-h1 { font-size: clamp(42px, 6.4vw, 76px); } .bm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .bm-foto { margin: 0; } .bm-foto img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--risco2); } .bm-foto figcaption { font: 400 18px var(--f-mao), cursive; color: var(--giz2); margin-top: 8px; } .bm-intro { color: var(--giz2); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: -6px 0 28px; } .bm-mundo { display: grid; gap: 28px; } @media (min-width: 760px) { .bm-mundo { grid-template-columns: repeat(3, 1fr); gap: 0; } .bm-mundo > div + div { border-left: 2px solid var(--risco2); padding-left: 28px; } .bm-mundo > div { padding-right: 24px; } } .bm-mundo h3 { font: 700 23px var(--f-mao), cursive; color: var(--amarelo); margin-bottom: 10px; } .bm-mundo ul { list-style: none; padding: 0; margin: 0; } .bm-mundo li { display: flex; align-items: center; gap: 10px; font: 600 18px var(--f-cond), sans-serif; padding: 5px 0; } .bm-mundo li img { border-radius: 2px; flex-shrink: 0; } .bm-motor { display: grid; gap: 32px; align-items: center; } @media (min-width: 900px) { .bm-motor { grid-template-columns: 420px 1fr; gap: 48px; } } .bm-motor svg { width: 100%; height: auto; display: block; } .bm-nota { display: grid; grid-template-columns: 16px 1fr; gap: 12px; margin-bottom: 22px; } .bm-nota i { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; border: 2.5px solid currentColor; } .bm-nota b { display: block; font: 700 21px var(--f-mao), cursive; margin-bottom: 2px; } .bm-nota p { color: var(--giz2); font-size: 16px; line-height: 1.55; } .bm-tres { display: grid; gap: 26px; } @media (min-width: 860px) { .bm-tres { grid-template-columns: repeat(3, 1fr); gap: 0; } .bm-tres > div + div { border-left: 2px solid var(--risco2); padding-left: 28px; } .bm-tres > div { padding-right: 24px; } } .bm-tres h3 { font: 700 25px var(--f-mao), cursive; margin-bottom: 8px; line-height: 1.15; } .bm-tres p { color: var(--giz2); font-size: 16px; line-height: 1.6; } .bm-grupo { margin-bottom: 36px; } .bm-grupo > h3 { font: 700 25px var(--f-mao), cursive; color: var(--amarelo); margin-bottom: 4px; } .bm-lista { list-style: none; padding: 0; margin: 0; display: grid; column-gap: 40px; } @media (min-width: 860px) { .bm-lista { grid-template-columns: 1fr 1fr; } } .bm-lista li { border-top: 1px solid var(--risco); padding: 14px 0 16px; } .bm-lista h4 { font: 700 19px var(--f-cond), sans-serif; margin-bottom: 4px; } .bm-lista p { color: var(--giz2); font-size: 15.5px; line-height: 1.55; } .bm-galeria-principal { margin: 0; border: 10px solid var(--madeira); border-radius: 6px; background: #0e1d18; } .bm-galeria-principal img { display: block; width: 100%; height: auto; } .bm-legenda { margin: 14px 0 18px; } .bm-legenda b { font: 700 22px var(--f-mao), cursive; margin-right: 10px; } .bm-legenda span { color: var(--giz2); font-size: 16px; } .bm-miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .bm-miniaturas button { padding: 0; border: 2px solid var(--risco); border-radius: 4px; background: none; cursor: pointer; aspect-ratio: 16 / 10; position: relative; overflow: hidden; opacity: .7; } .bm-miniaturas button[aria-pressed="true"] { border-color: var(--amarelo); opacity: 1; } .bm-linha { list-style: none; padding: 0; margin: 0 0 0 8px; border-left: 2px dashed var(--risco2); } .bm-linha li { position: relative; padding: 0 0 26px 30px; } .bm-linha li::before { content: ""; position: absolute; left: -9px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--verde); } .bm-linha li.falta::before { background: var(--lousa2); border: 2px dashed var(--azul); } .bm-linha .m { font: 700 16px var(--f-cond), sans-serif; color: var(--amarelo); margin-right: 8px; } .bm-linha b { font: 700 22px var(--f-mao), cursive; } .bm-linha .estado { font: 400 17px var(--f-mao), cursive; color: var(--verde); margin-left: 10px; } .bm-linha li.falta .estado { color: var(--azul); } .bm-linha p { color: var(--giz2); font-size: 16px; line-height: 1.55; max-width: 70ch; margin-top: 2px; } .bm-aviso { margin-top: 72px; } .bm-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 18px; } .bm-form label { display: block; width: 100%; font: 600 16px var(--f-cond), sans-serif; color: var(--giz2); } .bm-form input { flex: 1 1 260px; min-height: 48px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--risco2); background: rgba(0,0,0,.18); color: var(--giz); font: 400 17px var(--f-txt), sans-serif; } .bm-form input::placeholder { color: #8fa598; } .bm-form button { min-height: 48px; padding: 0 24px; border: none; border-radius: 8px; background: var(--amarelo); color: #19302a; font: 700 18px var(--f-cond), sans-serif; cursor: pointer; } .bm-form button:disabled { opacity: .5; cursor: not-allowed; } .pr .pr-rodape a.pr-logo { font: 700 27px var(--f-mao), cursive; color: var(--giz); } .pr-menu { position: relative; margin-left: auto; } @media (min-width: 820px) { .pr-menu { display: none; } } .pr-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; font: 600 17px var(--f-cond), sans-serif; color: var(--giz); border: 2px solid var(--risco2); border-radius: 8px; } .pr-menu summary::-webkit-details-marker { display: none; } .pr-menu nav { position: absolute; right: 0; top: 52px; background: var(--lousa2); border: 2px solid var(--madeira); border-radius: 8px; padding: 8px 0; min-width: 210px; display: grid; } .pr .pr-menu nav a { padding: 12px 18px; font: 600 18px var(--f-cond), sans-serif; color: var(--giz); text-decoration: none; } .pr .pr-menu nav a[aria-current="page"] { color: var(--amarelo); } @media (max-width: 420px) { .pr a.pr-botao.topo { padding: 10px 12px; font-size: 15px; } } /* guia Como jogar */ .gj-sec { scroll-margin-top: 80px; } .gj-indice { list-style: none; padding: 0; margin: 0; counter-reset: gj; border-top: 1px solid var(--risco); } .gj-indice li { counter-increment: gj; border-bottom: 1px solid var(--risco); } .pr .gj-indice a { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; padding: 11px 0; text-decoration: none; color: var(--giz2); font-size: 15px; line-height: 1.45; } .gj-indice a::before { content: counter(gj); grid-row: span 2; font: 700 22px var(--f-mao), cursive; color: var(--giz2); } .gj-indice b { font: 700 20px var(--f-mao), cursive; color: var(--amarelo); } .gj-indice a:hover b { text-decoration: underline; } .gj-rota { font: 700 20px var(--f-mao), cursive; color: var(--azul); margin: 18px 0 8px; } .gj-pos { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .gj-pos li { border: 1.5px solid var(--risco2); border-radius: 10px; padding: 14px; color: var(--giz2); font-size: 14.5px; line-height: 1.4; } .gj-pos span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--amarelo); font: 700 20px var(--f-cond), sans-serif; color: var(--amarelo); margin-bottom: 8px; } .gj-pos b { display: block; font: 600 18px var(--f-cond), sans-serif; color: var(--giz); } .gj-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .gj-chips li { border: 1.5px solid var(--risco2); border-radius: 999px; padding: 5px 13px; font: 600 16px var(--f-cond), sans-serif; } .gj-chips.gol li { border-color: var(--azul); color: var(--azul); } .gj-duas h4 { color: var(--amarelo); } .gj-fatores { list-style: none; padding: 0; margin: 0; display: grid; column-gap: 40px; } @media (min-width: 860px) { .gj-fatores { grid-template-columns: 1fr 1fr; } } .gj-fatores li { border-top: 1px solid var(--risco); padding: 10px 0; color: var(--giz2); font-size: 16px; line-height: 1.5; } .gj-fatores b { color: var(--giz); }

Mapa do jogo

Mapa do jogo