/* Jogos da Mondru - pagina /jogos/ em estetica 8-bit (03/11/2026)
   Paleta curta, como num console: papel, tinta, cinza e o vermelho so de destaque.
   Unidade de pixel: --u (4px no computador, 3px no celular). */
@font-face{font-family:"J8 Titulo";src:url(press-start-2p-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"J8 Titulo";src:url(press-start-2p-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"J8 Texto";src:url(vt323-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"J8 Texto";src:url(vt323-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}

.j8{--u:4px;--papel:#F3F2EE;--papel2:#E6E4DD;--tinta:#0E0E0D;--cinza:#8A8983;--cinza2:#C9C7BF;--verm:#C8102E;
  background:var(--papel);color:var(--tinta);font-family:"J8 Texto",ui-monospace,monospace;font-size:24px;line-height:1.15;
  -webkit-font-smoothing:none;font-smooth:never;overflow:hidden}
@media (max-width:620px){.j8{--u:3px;font-size:21px}}
.j8 *{box-sizing:border-box}
.j8 .w{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.j8 h1,.j8 h2,.j8 h3,.j8 .t8{font-family:"J8 Titulo",ui-monospace,monospace;font-weight:400;letter-spacing:0;line-height:1.35;margin:0}
.j8 p{margin:0}

/* canto "arredondado" de pixel: recorta um degrau de --u em cada ponta */
.j8 .px{clip-path:polygon(0 calc(var(--u)*2),var(--u) calc(var(--u)*2),var(--u) var(--u),calc(var(--u)*2) var(--u),calc(var(--u)*2) 0,calc(100% - var(--u)*2) 0,calc(100% - var(--u)*2) var(--u),calc(100% - var(--u)) var(--u),calc(100% - var(--u)) calc(var(--u)*2),100% calc(var(--u)*2),100% calc(100% - var(--u)*2),calc(100% - var(--u)) calc(100% - var(--u)*2),calc(100% - var(--u)) calc(100% - var(--u)),calc(100% - var(--u)*2) calc(100% - var(--u)),calc(100% - var(--u)*2) 100%,calc(var(--u)*2) 100%,calc(var(--u)*2) calc(100% - var(--u)),var(--u) calc(100% - var(--u)),var(--u) calc(100% - var(--u)*2),0 calc(100% - var(--u)*2))}

/* retícula de pixel (pontilhado ordenado), a mesma ideia da retícula do site, em 3 densidades */
.j8 .d25{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%230E0E0D'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%230E0E0D'/%3E%3C/svg%3E");background-size:calc(var(--u)*4) calc(var(--u)*4)}
.j8 .d50{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%230E0E0D'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%230E0E0D'/%3E%3C/svg%3E");background-size:calc(var(--u)*2) calc(var(--u)*2)}
.j8 .d75{background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23F3F2EE'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23F3F2EE'/%3E%3C/svg%3E");background-size:calc(var(--u)*4) calc(var(--u)*4)}
.j8 .degrade{display:grid}
.j8 .degrade>i{display:block;height:calc(var(--u)*4)}
.j8 .degrade>i:last-child{background:var(--tinta)}

/* ---------- tela de titulo ---------- */
.j8-hero{padding:clamp(48px,7vw,96px) 0 0}
.j8-hero .w{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.j8-kicker{display:inline-flex;gap:calc(var(--u)*3);align-items:center;font-family:"J8 Titulo";font-size:11px;color:var(--cinza);text-transform:uppercase}
.j8-kicker img{height:16px;width:auto;image-rendering:auto;opacity:.9}
.j8-hero h1{font-size:clamp(38px,6.2vw,84px);margin:calc(var(--u)*6) 0 calc(var(--u)*5);text-shadow:var(--u) var(--u) 0 var(--cinza2)}
.j8-hero h1 em{font-style:normal;color:var(--verm)}
.j8-hero .lead{font-size:clamp(24px,2.2vw,30px);max-width:30ch;color:#2b2b29}
.j8 .j8-start{margin-top:calc(var(--u)*8);font-family:"J8 Titulo";font-size:13px;display:flex;align-items:center;gap:12px}
.j8-start .seta{display:inline-block;width:0;height:0;border-left:calc(var(--u)*2) solid var(--tinta);border-top:calc(var(--u)*2) solid transparent;border-bottom:calc(var(--u)*2) solid transparent}
.j8-start .cur{display:inline-block;width:calc(var(--u)*3);height:calc(var(--u)*4);background:var(--tinta);animation:j8cur 1.4s steps(1) infinite}
@keyframes j8cur{50%{opacity:0}}

/* console desenhado em pixel (original, sem marca de fabricante) */
.j8-console{position:relative;width:100%;max-width:560px;justify-self:end}
.j8-console svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.j8-console .logo{position:absolute;left:9.3%;top:66.2%;width:27.1%;height:auto;image-rendering:auto;opacity:.92}
.j8-console .led{animation:j8led 3.2s steps(1) infinite}
@keyframes j8led{0%,86%{opacity:1}87%,93%{opacity:.35}}
.j8-console .ponta{transform-box:fill-box;animation:j8ponta 2.8s steps(4) infinite alternate}
@keyframes j8ponta{to{transform:translateY(-8%)}}

/* ---------- estante de cartuchos ---------- */
.j8-est{background:var(--tinta);color:var(--papel);padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,112px)}
.j8-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.j8-cab h2{font-size:clamp(18px,2.2vw,28px)}
.j8-cab p{color:var(--cinza2);max-width:42ch}
.j8-cab .n{font-family:"J8 Titulo";font-size:11px;color:var(--cinza)}
.j8-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px);align-items:start}

.cart8{display:block;color:inherit;text-decoration:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cart8 .cx{position:relative;display:block;width:100%;max-width:236px;margin:0 auto;transition:transform .32s steps(3)}
/* corpo do cartucho */
.cart8 .cb{position:relative;display:block;background:#2a2a28;padding:calc(var(--u)*9) calc(var(--u)*4) calc(var(--u)*4);
  box-shadow:inset calc(var(--u)*-1) calc(var(--u)*-1) 0 #1a1a19,inset var(--u) var(--u) 0 #3d3d3a}
/* frisos de pegar no topo */
.cart8 .cb::before{content:"";position:absolute;left:18%;right:18%;top:calc(var(--u)*2);height:calc(var(--u)*5);
  background:repeating-linear-gradient(90deg,#3d3d3a 0 var(--u),transparent var(--u) calc(var(--u)*3))}
/* etiqueta = capa do livro em pixel, inteira, sobre a cor do livro */
.cart8 .et{position:relative;display:block;aspect-ratio:2/3;background:var(--c,#373d43);overflow:hidden}
.cart8 .et img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto}
/* etiqueta: capa nitida, com um filete claro como adesivo colado no plastico */
.cart8 .et::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22)}
.cart8 .nm{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:calc(var(--u)*3);font-family:"J8 Titulo";font-size:10px;color:var(--papel);text-transform:uppercase}
.cart8 .nm b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart8 .nm .id{flex:none;background:var(--verm);color:#fff;padding:3px 4px 2px}
/* boca do console embaixo de cada cartucho */
.cart8 .slot{display:block;height:calc(var(--u)*4);margin:calc(var(--u)*2) auto 0;width:calc(100% - var(--u)*4);max-width:220px;background:#000;box-shadow:0 var(--u) 0 #3d3d3a}
.cart8 .info{display:block;text-align:center;margin-top:calc(var(--u)*5)}
.cart8 .info .t8{display:block;font-size:14px;color:var(--papel)}
.cart8 .info .lv{display:block;margin-top:10px;min-height:2.3em;color:var(--cinza2);font-size:22px}
.cart8 .info .tg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.cart8 .info .tg span{border:2px solid #4a4a46;padding:0 8px;font-size:19px;color:var(--cinza2)}
.cart8 .info .jg{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-family:"J8 Titulo";font-size:11px;color:var(--papel);padding:10px 14px 9px;background:transparent;box-shadow:inset 0 0 0 2px var(--papel)}
.cart8 .info .jg::before{content:"";width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cart8:hover .cx,.cart8:focus-visible .cx{transform:translateY(calc(var(--u)*-3))}
.cart8:hover .info .jg,.cart8:focus-visible .info .jg{background:var(--papel);color:var(--tinta)}
.cart8:focus-visible .cb{outline:var(--u) solid var(--verm);outline-offset:var(--u)}
/* encaixe ao clicar */
.cart8.entra .cx{transform:translateY(calc(var(--u)*7));transition:transform .42s steps(4)}

/* vaga vazia: proximo jogo */
.cart8.vaga{cursor:default}
.cart8.vaga .cb{background:transparent;box-shadow:none;border:var(--u) dashed #4a4a46}
.cart8.vaga .cb::before{background:repeating-linear-gradient(90deg,#4a4a46 0 var(--u),transparent var(--u) calc(var(--u)*3))}
.cart8.vaga .et{background:transparent;display:grid;place-items:center}
.cart8.vaga .et::after{display:none}
.cart8.vaga .et span{font-family:"J8 Titulo";font-size:28px;color:#4a4a46}
.cart8.vaga .nm{color:#6c6b66}
.cart8.vaga .info .t8{color:#6c6b66}
.cart8.vaga .info .lv{color:#6c6b66}

/* ---------- como jogar ---------- */
.j8-como{padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px)}
.j8-como h2{font-size:clamp(18px,2.2vw,28px);margin-bottom:clamp(28px,4vw,48px)}
.j8-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.j8-passo{background:#fff;padding:calc(var(--u)*7) calc(var(--u)*6);position:relative;box-shadow:inset 0 0 0 var(--u) var(--tinta)}
.j8-passo .k{font-family:"J8 Titulo";font-size:11px;color:var(--verm)}
.j8-passo h3{font-size:14px;margin:14px 0 12px}
.j8-passo p{color:#3a3a37}
.j8-passo::after{content:"";position:absolute;right:calc(var(--u)*-2);bottom:calc(var(--u)*-2);width:100%;height:100%;z-index:-1}
.j8 .j8-aviso{margin-top:clamp(28px,4vw,44px);color:var(--cinza);font-size:21px}

/* ---------- troca de tela (ao abrir um jogo) ---------- */
.j8-wipe{position:fixed;inset:0;z-index:9999;display:grid;pointer-events:none}
.j8-wipe i{background:var(--tinta);opacity:0}
.j8-wipe.on i{animation:j8w .1s steps(1) forwards}
@keyframes j8w{to{opacity:1}}

@media (max-width:900px){
  .j8-hero .w{grid-template-columns:1fr}
  .j8-console{justify-self:center;max-width:460px}
  .j8-passos{grid-template-columns:1fr}
}
@media (max-width:620px){
  .j8-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .cart8 .nm{font-size:8px}
  .cart8 .info .t8{font-size:11px}
  .cart8 .info .lv{font-size:19px}
  .cart8 .info .tg span{font-size:17px}
  .j8-kicker{font-size:9px}
  .j8-start{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .j8 *,.j8 *::before{animation:none!important;transition:none!important}
}
/* celular (2 colunas): vaga vazia sobrando sozinha na ultima linha some */
@media (max-width:620px){.j8-grade>.vaga:last-child:nth-child(odd){display:none}}

/* ---------- cena animada da abertura: TV de tubo + console + cartucho (03/11/2026) ---------- */
.j8-cena{position:relative;width:100%;max-width:580px;aspect-ratio:560/490;justify-self:end}
.j8-cena svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.j8-cena .tv{position:absolute;left:41%;top:4%;width:59%;z-index:1}
.j8-cena .cons{position:absolute;left:0;top:47%;width:66%;z-index:3}
.j8-cena .cart8 .nm{display:none}
.j8-cena .cart8 .cb{padding-bottom:calc(var(--u)*2.5)}
.j8-cena .cart8{opacity:var(--o,1)}
.j8-cena .cons .logo{position:absolute;left:9.3%;top:66.2%;width:27.1%;height:auto;image-rendering:auto;opacity:.92}
.j8-cena .cons .led{opacity:.25;transition:opacity .2s steps(1)}
.j8-cena.ligado .cons .led{opacity:1}
/* tela da TV: conteudo em HTML por cima do desenho */
.j8-cena .tela{position:absolute;left:9%;top:20.2%;width:62%;height:59.5%;background:#0E0E0D;overflow:hidden;container-type:size;color:#F3F2EE;text-decoration:none;display:block;cursor:pointer}
.j8-cena .tela::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.35) 100%)}
.j8-cena .tela canvas.ruido{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0}
.j8-cena.chuvisco .tela canvas.ruido{opacity:1}
.j8-cena .tit{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;gap:6cqw;align-items:center;padding:8cqh 7cqw;background:var(--c,#373d43);opacity:0;transform:scaleY(.02);filter:brightness(2.4)}
.j8-cena.titulo .tit{opacity:1;transform:none;filter:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .7s ease-out,opacity .08s}
.j8-cena .tit .cv{position:relative;height:84cqh;aspect-ratio:2/3}
.j8-cena .tit .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-shadow:0 .8cqh 2cqh rgba(0,0,0,.35)}
.j8-cena .tit .tx{display:flex;flex-direction:column;gap:3.4cqh;min-width:0}
.j8-cena .tit .t8{font-size:7.6cqh;line-height:1.3;color:#fff;text-shadow:.8cqh .8cqh 0 rgba(0,0,0,.45)}
.j8-cena .tit .lv{font-size:8.4cqh;line-height:1;color:rgba(255,255,255,.85)}
.j8-cena .tit .st{font-family:"J8 Titulo";font-size:5.6cqh;color:#fff;margin-top:4cqh;opacity:0}
.j8-cena.titulo .tit .st{animation:j8st 1.6s steps(1) .8s infinite}
@keyframes j8st{0%,60%{opacity:1}61%,100%{opacity:0}}
/* liga e desliga como TV de tubo: uma linha que abre e fecha */
.j8-cena .tela .lin{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;transform:scaleX(0);opacity:0;z-index:2}
.j8-cena.desliga .tela .lin{animation:j8off .5s steps(5) forwards}
@keyframes j8off{0%{opacity:1;transform:scaleX(1)}80%{opacity:1;transform:scaleX(.04)}100%{opacity:0;transform:scaleX(0)}}
/* cartucho: fica atras do console, entao some de verdade dentro do slot */
.j8-cena .cart8{position:absolute;left:20.8%;width:20%;top:8%;z-index:2;pointer-events:none}
.j8-cena .cart8 .cx{max-width:none;transition:none}
.j8-cena .cart8 .cb{padding:calc(var(--u)*5) calc(var(--u)*2.5) calc(var(--u)*2.5)}
.j8-cena .cart8 .cb::before{top:var(--u);height:calc(var(--u)*3)}
.j8-cena .cart8 .nm{font-size:7px;margin-top:calc(var(--u)*2)}
.j8-cena .cart8 .nm .id{padding:2px 3px 1px}
.j8-cena .cart8 .slot{display:none}
.j8-cena .cart8{transform:translateY(var(--y,0px));transition:transform var(--t,0s) steps(var(--s,1)),opacity .3s steps(3)}
@media (max-width:900px){.j8-cena{justify-self:center;max-width:480px}}


/* palco do cartucho: retícula animada com as cores da capa (a mesma do site, retcapa.js) na cor do livro (03/11/2026) */
.cart8 .palco8{position:relative;display:block;isolation:isolate;overflow:hidden;background:var(--c,#373d43);padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px) clamp(20px,2vw,26px)}
.cart8 .palco8>canvas.rc30{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s}
.cart8 .palco8>canvas.rc30.on{opacity:.62}
.cart8 .palco8::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.28) 100%)}
.cart8 .palco8 .slot{background:rgba(0,0,0,.55);box-shadow:0 var(--u) 0 rgba(255,255,255,.12)}
.cart8.vaga .palco8{background:transparent}
.cart8.vaga .palco8::after{display:none}
.jg8 .j8.jg8-tela .palco8{padding:clamp(30px,3vw,44px) clamp(30px,3.4vw,52px) clamp(24px,2.6vw,34px)}
@media (max-width:620px){.j8-grade .cart8 .palco8{padding:16px 12px 12px}}