/* ============================================================
   JOGOS DO VIMEZITO — a página de entrada (vimezer.com.br/jogos/)

   É uma página do site: carrega o style.css e só acrescenta o que é dela.
   Mesma linguagem do resto do vimezer.com.br — verde chapado, amarelo,
   Bree Serif, cantos de 4px, sem sombra difusa nem vidro fosco.
   ============================================================ */

/* ---------- Hero ---------- */
.arcade-hero-grid{grid-template-columns:1.15fr .85fr;align-items:end;padding:60px 0 0}
.arcade-hero-grid > div{padding-bottom:56px}
.arcade-hero h1{max-width:13ch}
/* o Vimezito jogando (22/10/2026) se apoia na faixa em zigue-zague: a arte é
   cortada na cintura, na capa e no fliperama, então encosta embaixo e as
   laterais somem num esmaecido */
.arcade-mascote{justify-self:center;width:min(290px,78%);height:auto;margin-bottom:-4px;position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%)}

/* ---------- Os jogos ---------- */
.arcade-jogos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.arcade-jogo{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-top:5px solid var(--amarelo)}
.arcade-capa{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--verde-tinta);border-bottom:1px solid var(--linha)}
.arcade-capa img{width:100%;height:100%;object-fit:cover;transition:transform var(--transicao)}
.arcade-jogo:hover .arcade-capa img{transform:scale(1.03)}
.arcade-jogo-texto{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;padding:24px 26px 28px}
.arcade-jogo-texto h3{font-size:34px;color:var(--verde-escuro)}
.arcade-jogo-texto > p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.arcade-fatos{list-style:none;align-self:stretch;margin:4px 0 10px;padding:0;border-top:1px solid var(--linha)}
.arcade-fatos li{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px;line-height:1.4}
.arcade-fatos strong{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);padding-top:2px}
.arcade-jogo .btn{margin-top:auto}
/* com três jogos, tela larga põe os três lado a lado; abaixo disso o
   terceiro desce sozinho (três colunas em 900 px espremem a lista de fatos) */
@media (min-width:1100px){.arcade-jogos{grid-template-columns:repeat(3,1fr);gap:24px}.arcade-jogo-texto h3{font-size:30px}}

/* ---------- Placar de Boa Vista ----------
   Texto à esquerda, o quadro à direita: o quadro é a placa escura do
   canteiro, a mesma do boletim de fim dentro dos jogos. O número da posição
   é o que se lê de longe (Bree Serif, amarelo). */
.arcade-placar-secao{padding-top:0}
.arcade-placar-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start;padding-top:28px;border-top:3px solid var(--tinta)}
.arcade-placar-texto h2{font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin:0 0 12px}
.arcade-placar-texto p{margin:0 0 14px;color:var(--muted);line-height:1.55;max-width:42ch}
.arcade-placar-voce{color:var(--tinta) !important}
.arcade-placar-voce button{font:inherit;font-weight:700;color:var(--verde);background:none;border:0;padding:10px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.arcade-placar-voce button:hover{color:var(--verde-tinta)}

.arcade-placar{background:var(--verde-tinta);color:#fff;border-radius:var(--raio);border-top:5px solid var(--amarelo)}
.arcade-placar-abas{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.16)}
.arcade-placar-abas button{min-height:52px;padding:10px 8px;border:0;background:none;color:rgba(255,255,255,.72);cursor:pointer;
  font:700 15px var(--corpo);letter-spacing:.02em;border-bottom:3px solid transparent;margin-bottom:-1px}
.arcade-placar-abas button:hover{color:#fff}
.arcade-placar-abas button[aria-selected="true"]{color:var(--amarelo);border-bottom-color:var(--amarelo)}
.arcade-placar-painel{padding:16px 22px 22px}
.arcade-placar-quando{display:inline-flex;border:1px solid rgba(255,255,255,.3);border-radius:var(--raio);margin-bottom:10px}
.arcade-placar-quando button{min-height:40px;padding:6px 14px;border:0;background:none;color:rgba(255,255,255,.8);cursor:pointer;font:600 14px var(--corpo)}
.arcade-placar-quando button + button{border-left:1px solid rgba(255,255,255,.3)}
.arcade-placar-quando button:hover{color:#fff;background:rgba(255,255,255,.1)}
.arcade-placar-quando button[aria-pressed="true"]{background:#fff;color:var(--verde-tinta)}
.arcade-placar :focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

.arcade-placar-lista{list-style:none;margin:0;padding:0;min-height:120px;font-variant-numeric:tabular-nums}
.arcade-placar[aria-busy="true"] .arcade-placar-lista,
.arcade-placar-secao[aria-busy="true"] .arcade-placar-lista{opacity:.55}
.arcade-placar-lista li{display:grid;grid-template-columns:2.6em 1fr auto;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.arcade-placar-lista li:last-child{border-bottom:0}
.arcade-placar-lista:empty{min-height:0}
.arcade-placar-lista b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--amarelo);line-height:1}
.arcade-placar-lista span{font-weight:600;font-size:17px;overflow-wrap:anywhere}
.arcade-placar-lista strong{font-weight:700;font-size:16px;color:rgba(255,255,255,.88);white-space:nowrap}
/* os três primeiros pesam mais: é o pódio */
.arcade-placar-lista li:nth-child(-n+3) b{font-size:30px}
.arcade-placar-lista li.meu{background:rgba(252,252,0,.1);box-shadow:inset 3px 0 0 var(--amarelo);margin:0 -22px;padding-left:22px;padding-right:22px}
.arcade-placar-vazio{margin:6px 0 0;color:rgba(255,255,255,.75);line-height:1.5}

/* ---------- O que dá para aprender ---------- */
.arcade-aprende-secao{padding-top:0}
.arcade-aprende{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--verde-tinta)}
.arcade-aprende article{padding:26px 28px 8px 0}
.arcade-aprende article + article{padding-left:28px;border-left:1px solid var(--linha)}
.arcade-aprende h3{font-size:24px;color:var(--verde-escuro);margin:0 0 10px}
.arcade-aprende p{margin:0 0 14px;color:var(--muted);line-height:1.55}

/* ---------- Celular ---------- */
@media (max-width:820px){
  .arcade-hero-grid{grid-template-columns:1fr;padding:36px 0 0;gap:0}
  .arcade-hero-grid > div{padding-bottom:10px}
  .arcade-mascote{width:230px;justify-self:center;margin-top:6px}
  .arcade-jogos{grid-template-columns:1fr;gap:22px}
  .arcade-jogo-texto{padding:20px 18px 22px}
  .arcade-jogo-texto h3{font-size:30px}
  .arcade-fatos li{grid-template-columns:1fr;gap:2px}
  .arcade-jogo .btn{align-self:stretch}
  .arcade-aprende{grid-template-columns:1fr}
  .arcade-placar-grid{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .arcade-placar-painel{padding:12px 16px 16px}
  .arcade-placar-lista li.meu{margin:0 -16px;padding-left:16px;padding-right:16px}
  .arcade-placar-quando{display:flex}
  .arcade-placar-quando button{flex:1}
  .arcade-aprende article,
  .arcade-aprende article + article{padding:20px 0 6px;border-left:0}
  .arcade-aprende article + article{border-top:1px solid var(--linha)}
}