/* assets/css/cinema.css — PayatGamer · V2.67 "Cinema" (NOVO, 12/11/2026)
   Página inicial com o vídeo da serpente PAYAT ao fundo e as seções de sempre, uma por tela (assets/js/cinema.js).
   html.pg-cinema = modo ligado (cores e fontes) · html.cin-on = o JavaScript montou as telas (trava a rolagem da página). */

/* ── cores e fontes: escuro, ouro e brasa (as seções usam estas variáveis) ── */
html.pg-cinema{
  color-scheme:dark;
  --bg:#0a0605; --bg2:rgba(12,7,5,.9); --bg3:#160d09; --bg4:#1f130d;
  --card:rgba(18,10,7,.86); --card2:rgba(28,16,10,.9); --card3:rgba(44,26,15,.92);
  --text:#F6EAD4; --text2:#D2BC9A; --text3:#97815F; --title-color:#FFF6E2;
  --border:rgba(232,182,80,.24); --borderp:rgba(232,182,80,.38); --card-border:rgba(232,182,80,.24);
  --nav-bg:rgba(10,6,5,.8); --tag-bg:rgba(232,182,80,.12); --input-bg:rgba(255,240,210,.05);
  --scan-color:transparent; --shadow:rgba(0,0,0,.6);
  --y:#E8B650; --y2:#FFE3A0; --y3:#6A4A12; --hot:#FF7A1A; --hot2:#FF9A4A; --cyan:#FFC46B; --p:#C9853F; --p2:#E3AE73; --p3:#3A2414;
  --on-accent:#1a0c05; --on-hot:#1a0c05; --accent:var(--hot);
  --y-t:#F2C25A; --cyan-t:#FFC46B; --hot-t:#FF8A3D; --p-t:#E9B57E; --green-t:#7BE0A4; --red-t:#FF7A7A;
  --glow-hot:rgba(255,122,26,.22); --glow-cyan:rgba(255,196,107,.14);
  /* fontes fáceis de ler sobre o vídeo: Poppins nos títulos e botões, Nunito Sans nos textos */
  --font-heavy:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cin-ouro:#F5C04E; --cin-ouro2:#FFE3A0; --cin-brasa:#FF8A3D; --cin-linha:rgba(232,182,80,.32);
  /* sombras do texto: leve em tudo, forte nos títulos que ficam direto sobre o vídeo */
  --cin-sombra:0 1px 2px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.8);
  --cin-sombra-forte:0 2px 0 rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.85),0 6px 28px rgba(0,0,0,.9);
}
html.pg-cinema body{font-family:var(--font-body)}
html.pg-cinema body{background:#050302;color:var(--text)}
html.pg-cinema #pg-canvas,html.pg-cinema #arena-bg{display:none!important}

/* ── o vídeo ao fundo (fica parado se o JavaScript não rodar) ── */
#cin-palco{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000;pointer-events:none}
#cin-palco img,#cin-palco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#cin-palco video{opacity:0}
#cin-palco video.vis{opacity:1}
#cin-escuro{position:absolute;inset:0;background:rgba(5,3,2,.8);transition:background .9s ease}
html.cin-on[data-cin="0"] #cin-escuro{background:radial-gradient(ellipse 62% 46% at 50% 56%,rgba(5,3,2,.6),rgba(5,3,2,0) 100%),linear-gradient(180deg,rgba(5,3,2,.72) 0%,rgba(5,3,2,.2) 30%,rgba(5,3,2,.2) 62%,rgba(5,3,2,.8) 100%)}
html.pg-cinema #main-content,html.pg-cinema body > footer,html.pg-cinema .banner-topo-wrap,html.pg-cinema .banner-rodape-row,html.pg-cinema #arcade{position:relative;z-index:1}
html.pg-cinema .mn{z-index:1000}

/* ── seções: transparentes sobre o vídeo, títulos em ouro ── */
html.pg-cinema .sec,html.pg-cinema .sec-alt{background:transparent!important}
html.pg-cinema .sec-alt::before{display:none}
html.pg-cinema .sec-title{font-family:var(--font-heavy);font-weight:800;letter-spacing:-.01em;color:#FFFFFF}
html.pg-cinema .sec-title span{color:var(--cin-ouro);background:none;-webkit-text-fill-color:currentColor}
html.pg-cinema .sec-eyebrow{font-family:var(--font-heavy);font-weight:700;letter-spacing:.2em;color:var(--cin-brasa)}
html.pg-cinema .sec-eyebrow::before{content:none}
html.pg-cinema .sec-sub{color:#F4E9D6;font-weight:600}
html.pg-cinema .sec-link{color:var(--cin-ouro2);font-weight:700}
/* sombras: um contorno escuro em todo texto sobre o vídeo; mais forte nos títulos; nada nos botões claros e campos */
html.pg-cinema :is(#main-content,body > footer,.cin-tela){text-shadow:0 1px 2px rgba(0,0,0,.85)}
html.pg-cinema :is(.sec-title,.cin-lema,.cin-kb){text-shadow:var(--cin-sombra-forte)}
html.pg-cinema :is(.sec-eyebrow,.sec-sub,.sec-link,.cin-frase,.cin-numeros,.cin-dica,.cin-olho){text-shadow:var(--cin-sombra)}
html.pg-cinema :is(.btn-hot,.btn-y,.wz-btn:not(.gh),.wz-tag,input,textarea,select,button.on){text-shadow:none}
html.pg-cinema footer{background:rgba(8,5,4,.86)!important}

/* ── primeira tela: o koBRasil, com o convite e o botão JOGAR ── */
.cin-abertura{position:relative;min-height:calc(100vh - var(--nav-h,64px));min-height:calc(100dvh - var(--nav-h,64px));display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:28px;padding:clamp(16px,4vh,56px) clamp(18px,5vw,64px) 92px;text-align:center}
.cin-abertura.ao-vivo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);text-align:left}
.cin-olho{display:inline-block;font:700 12px/1 var(--font-heavy);letter-spacing:.22em;text-transform:uppercase;color:#FFD98A;background:rgba(8,5,4,.6);border:1px solid rgba(245,192,78,.4);border-radius:999px;padding:8px 16px;margin-bottom:clamp(8px,2vh,18px)}
.cin-kb{margin:0;font:900 clamp(56px,10vw,140px)/1 var(--font-heavy);letter-spacing:-.02em;color:#fff}
.cin-kb span{color:#FF9A1F}
.cin-kb img{display:block;width:min(700px,88vw);height:auto;max-height:22vh;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.75)) drop-shadow(0 10px 26px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(255,120,20,.4))}
.ao-vivo .cin-kb img{margin-left:0}
.cin-lema{margin:clamp(8px,1.6vh,16px) 0 0;font:800 clamp(20px,2.6vw,34px)/1.1 var(--font-heavy);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.cin-lema span{color:var(--cin-ouro)}
.cin-frase{max-width:38em;margin:clamp(8px,1.6vh,16px) auto 0;font:600 clamp(15px,1.45vw,19px)/1.55 var(--font-body);color:#FFF5E4}
.cin-frase b{color:#FFD98A;font-weight:800}
.ao-vivo .cin-frase{margin-left:0}
.cin-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:center;margin-top:clamp(16px,3vh,28px)}
.ao-vivo .cin-botoes{justify-content:flex-start}
/* botões em ouro metálico (como o nome do koBRasil e o JOGAR do jogo), com um reflexo que passa de tempos em tempos */
.cin-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font:700 14px/1 var(--font-heavy);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:#2A1600;text-shadow:0 1px 0 rgba(255,246,214,.55);
  background:linear-gradient(180deg,#FFF4C2 0%,#FFD65A 24%,#F3A81B 50%,#C9780B 52%,#F6B530 78%,#FFE17A 100%);border:1px solid #FFF0C0;border-radius:12px;
  box-shadow:0 0 0 3px rgba(10,6,5,.85),0 0 0 4px #F5B330,0 10px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(120,60,0,.35);transition:transform .25s,box-shadow .25s,filter .25s}
.cin-btn::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:cin-reflexo 3.4s ease-in-out infinite}
@keyframes cin-reflexo{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.cin-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 0 3px rgba(10,6,5,.85),0 0 0 4px #FFE08A,0 0 34px rgba(255,170,40,.6),inset 0 1px 0 rgba(255,255,255,.7)}
/* secundário: vidro escuro com moldura de ouro e letra dourada */
.cin-btn.vazado{color:#FFE29A;text-shadow:var(--cin-sombra);border:2px solid transparent;
  background:linear-gradient(rgba(14,8,4,.8),rgba(14,8,4,.8)) padding-box,linear-gradient(180deg,#FFF4C2,#F3A81B 50%,#9A5A06 52%,#FFD65A) border-box;
  box-shadow:0 0 0 3px rgba(10,6,5,.6),0 10px 26px rgba(0,0,0,.5)}
.cin-btn.vazado::after{background:linear-gradient(110deg,transparent 35%,rgba(255,220,140,.22) 50%,transparent 65%)}
.cin-btn.vazado:hover{color:#FFF4CF;box-shadow:0 0 0 3px rgba(10,6,5,.6),0 0 28px rgba(255,170,40,.45)}
/* JOGAR: maior, com o brilho dourado pulsando */
.cin-btn.jogar{padding:18px 40px;font-size:clamp(16px,1.5vw,20px);font-weight:800;letter-spacing:.08em;animation:cin-jogar 2.4s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(10,6,5,.85),0 0 0 4px #F5B330,0 10px 30px rgba(0,0,0,.55),0 0 34px rgba(255,170,40,.45),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(120,60,0,.35)}
.cin-btn.jogar:hover{box-shadow:0 0 0 3px rgba(10,6,5,.85),0 0 0 4px #FFE08A,0 0 52px rgba(255,180,50,.8),inset 0 1px 0 rgba(255,255,255,.7)}
@keyframes cin-jogar{50%{box-shadow:0 0 0 3px rgba(10,6,5,.85),0 0 0 4px #FFC83D,0 10px 30px rgba(0,0,0,.55),0 0 58px rgba(255,180,50,.72),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(120,60,0,.35)}}
.cin-numeros{margin-top:clamp(12px,2.4vh,20px);font:700 14px/1.3 var(--font-body);letter-spacing:.02em;color:#F4E6CC}
.cin-numeros b{color:#FFD98A;font:800 17px/1 var(--font-heavy)}
.cin-live{align-self:center;background:rgba(10,6,5,.78);border:1px solid var(--cin-linha);border-radius:14px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cin-live-topo{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--font-heavy);letter-spacing:.14em;color:#ff6b5a;margin-bottom:10px}
.cin-pulso{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:cin-pulso 1.6s infinite}
@keyframes cin-pulso{70%{box-shadow:0 0 0 12px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.cin-live-video{position:relative;aspect-ratio:16/9;background:#000}
.cin-live-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cin-live-tit{margin-top:10px;font:700 15px/1.4 var(--font-body);color:var(--text)}
.cin-live-tit small{color:var(--text2)}
.cin-dica{position:absolute;left:0;right:0;bottom:18px;text-align:center;font:700 12px/1 var(--font-heavy);letter-spacing:.2em;text-transform:uppercase;color:#fff3da;opacity:.9;animation:cin-pisca 2.2s infinite;pointer-events:none}
.cin-dica i{display:block;font-style:normal;font-size:16px;margin-top:6px}
@keyframes cin-pisca{50%{opacity:.35}}
html:not(.cin-on) .cin-dica{display:none}

/* ── sessão a sessão (só com o JavaScript) ── */
html.cin-on,html.cin-on body{height:100%;overflow:hidden!important;overscroll-behavior:none}
html.cin-on .mn{position:fixed;left:0;right:0;top:0}
html.cin-on #main-content{position:static}
.cin-tela{position:fixed;inset:0;z-index:5;overflow:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;justify-content:safe center;padding:calc(var(--nav-h,64px) + 10px) 0 28px;
  opacity:0;visibility:hidden;transform:translateY(46px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .7s;
  scrollbar-width:thin;scrollbar-color:rgba(232,182,80,.45) transparent}
.cin-tela.cima{transform:translateY(-46px)}
.cin-tela.rola{overflow-y:auto}                       /* só quando nem reduzida a tela cabe (janela muito baixa) */
.cin-caixa{width:100%;flex:none}
.cin-tela.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .18s,transform .75s cubic-bezier(.2,.7,.2,1) .18s,visibility 0s}
.cin-tela::-webkit-scrollbar{width:6px}.cin-tela::-webkit-scrollbar-thumb{background:rgba(232,182,80,.45);border-radius:3px}
.cin-caixa > .sec{padding-block:clamp(8px,2vh,28px)}
.cin-caixa > footer{padding-top:clamp(12px,3vh,36px)!important}
/* trilhos de cards: mais estreitos para caberem na altura da tela (4 por vez em tela larga, 3 na média) */
@media (min-width:1101px){
  .cin-tela .hs-rail > *{flex-basis:calc((100% - 54px) / 4)}
  .cin-tela .hs-rail > .hs-rail-more{flex-basis:calc((100% - 54px) / 4 * .6)}
}
@media (min-width:701px) and (max-width:1100px){
  .cin-tela .hs-rail > *{flex-basis:calc((100% - 36px) / 3)}
  .cin-tela .hs-rail > .hs-rail-more{flex-basis:calc((100% - 36px) / 3 * .6)}
}
.cin-tela .banner-topo-wrap .banner-slot{max-width:760px}
.cin-tela .ft-cta h2{font-size:clamp(24px,3.2vw,40px)!important;line-height:1.1}
.cin-tela .ft-cta{padding-block:clamp(14px,2.6vh,28px)!important;margin-bottom:clamp(14px,2.6vh,32px)!important}
.cin-tela .footer-grid{gap:clamp(12px,2.4vh,28px) clamp(16px,3vw,40px)!important}
.cin-tela .footer-link{padding-block:clamp(2px,.5vh,6px)!important;min-height:0!important}
.cin-tela .ft-legal{padding-block:10px!important}
.cin-tela.t-abertura{justify-content:flex-start;padding-top:var(--nav-h,64px);padding-bottom:0}
.cin-tela.t-abertura .cin-abertura{min-height:calc(100vh - var(--nav-h,64px));min-height:calc(100dvh - var(--nav-h,64px))}
.cin-tela.t-fim{justify-content:safe flex-end;padding-bottom:0}
.cin-tela .sec-head{margin-bottom:clamp(14px,2.4vh,26px)}

/* ── compactação no modo Cinema: o que é alto demais fica enxuto para caber numa tela ── */
.cin-tela .arc-soon{display:none}                                   /* "em breve" do arcade */
.cin-tela #arcade .sec-sub{display:none}
@media (max-width:760px){
  .cin-tela .sec-sub,.cin-tela .hk-lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* kit do streamer: os 4 itens deslizam de lado; números lado a lado; pacote sem a lista de benefícios */
  .cin-tela #kit .hk-box{gap:12px}
  .cin-tela #kit .hk-grid{display:grid;grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .cin-tela #kit .hk-it{scroll-snap-align:start}
  .cin-tela #kit .hk-pk ul,.cin-tela #kit .hk-pk p{display:none}
  .cin-tela #kit .hk-pk{padding:14px}
  /* jogos: arte do destaque menor, texto em 3 linhas, botões menores; o aviso de login sai (o menu já tem Entrar) */
  .cin-tela .wz-feat{gap:10px}
  .cin-tela .wz-feat .wz-art{min-height:0}
  .cin-tela .wz-feat .wz-art img{max-height:96px;width:auto;margin:0 auto}
  .cin-tela .wz-feat h3{margin:8px 0 6px}
  .cin-tela .wz-feat p{font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cin-tela .wz-acts{gap:8px;margin-top:12px}
  .cin-tela .wz-btn{min-height:40px;padding:0 14px;font-size:12px}
  /* rodapé: colunas lado a lado, sem a descrição, botões da chamada na mesma linha */
  .cin-tela .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px 10px!important}
  .cin-tela .footer-grid .ft-brand{grid-column:1/-1}
  .cin-tela .footer-grid > div:first-child{grid-column:1/-1}
  .cin-tela .footer-desc{display:none}
  .cin-tela .footer-col-title{font-size:11px;margin-bottom:6px}
  .cin-tela .ft-cta-btns a{flex:1 1 40%;width:auto!important;justify-content:center}
  .cin-tela .arc-login{display:none}
  .cin-tela .arc-game .arc-art{max-height:118px;overflow:hidden}
  .cin-tela .arc-game .arc-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cin-tela .arc-daily{padding-block:12px}
  /* rodapé: chamada enxuta */
  .cin-tela .ft-cta{padding-block:14px!important;gap:10px!important}
  .cin-tela .ft-cta p{display:none}
  .cin-tela .ft-cta h2{font-size:22px!important}
  .cin-tela .ft-cta-btns{flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
  .cin-tela .ft-cta-btns a{padding:10px 14px!important;font-size:11px!important}
  .cin-tela .footer-link{padding:3px 0!important;min-height:0!important;line-height:1.3!important}
  .cin-tela .ft-legal,.cin-tela .footer-bottom{padding-block:8px!important;font-size:11px}
  .cin-tela .footer-link{line-height:1.25!important;height:auto!important;font-size:12px!important}
  .cin-tela .ft-cta-btns{display:flex!important}
}
/* celular baixo (até ~760 px de altura): só o essencial em cada tela */
@media (max-width:760px) and (max-height:760px){
  .cin-tela .hd-cta p{display:none}
  .cin-tela .hd-cta{padding-block:10px!important;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .cin-tela #kit .hk-nums,.cin-tela #kit .hk-lead{display:none}
  .cin-tela .arc-game .arc-art,.cin-tela .arc-board{display:none}
  .cin-tela .wz-feat .wz-art,.cin-tela .wz-stats{display:none}             /* jogos: só o convite e os botões */
  .cin-tela .footer-bottom{display:none}
  .cin-tela .ft-socials{gap:6px!important}
  .cin-tela .footer-grid .footer-link:nth-of-type(n+7){display:none}     /* até 6 links por coluna (o menu do celular tem todos) */
  .cin-tela .footer-link{font-size:12px;padding-block:2px}
}
/* tablet e janela média: desafios lado a lado; se a tela for baixa, kit em 2 colunas e rodapé numa linha só */
@media (min-width:761px) and (max-width:1100px){
  .cin-tela .arc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
@media (min-width:761px) and (max-width:1100px) and (max-height:760px){
  .cin-tela #kit .hk-box{grid-template-columns:minmax(0,1fr);gap:14px}
  .cin-tela #kit .hk-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
  .cin-tela #kit .hk-lead{display:none}
  .cin-tela #kit .hk-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;align-items:stretch}
  .cin-tela #kit .hk-pk ul{display:none}
  .cin-tela .footer-grid{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))!important;gap:12px 18px!important}
  .cin-tela .footer-grid > div:first-child{grid-column:auto}
  .cin-tela .footer-desc,.cin-tela .ft-cta p{display:none}
  .cin-tela .footer-grid .footer-link:nth-of-type(n+9){display:none}
}
.cin-tela .banner-topo-wrap{padding-top:0;margin-bottom:6px}
html.cin-on .fab-top{display:none!important}

/* pontos de navegação e som */
#cin-pontos{display:none}
html.cin-on #cin-pontos{position:fixed;right:max(14px,1.6vw);top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;gap:11px}
#cin-pontos button{position:relative;width:11px;height:11px;border-radius:50%;border:1px solid var(--cin-ouro);background:rgba(10,6,5,.5);cursor:pointer;padding:0;transition:background .3s,transform .3s}
#cin-pontos button.on{background:var(--cin-ouro);transform:scale(1.3);box-shadow:0 0 12px var(--cin-brasa)}
#cin-pontos button span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:700 12px/1 var(--font-heavy);letter-spacing:.08em;border-radius:6px;text-transform:uppercase;color:var(--cin-ouro2);background:rgba(10,6,5,.86);padding:6px 10px;opacity:0;pointer-events:none;transition:opacity .2s}
#cin-pontos button:hover span,#cin-pontos button:focus-visible span{opacity:1}
#cin-som{display:none}
html.cin-on #cin-som{position:fixed;left:max(14px,1.6vw);bottom:max(14px,2vh);z-index:900;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--cin-linha);background:rgba(10,6,5,.6);color:var(--cin-ouro2);font-size:17px;cursor:pointer}
html.cin-on #cin-som:hover{border-color:var(--cin-ouro)}

/* celular e telas em pé */
@media (max-width:760px){
  .cin-abertura,.cin-abertura.ao-vivo{grid-template-columns:minmax(0,1fr);text-align:center;padding:18px 18px 76px;gap:18px}
  .ao-vivo .cin-botoes{justify-content:center}.ao-vivo .cin-frase{margin-left:auto}.ao-vivo .cin-kb img{margin-left:auto}
  .cin-olho{font-size:11px;letter-spacing:.16em;padding:7px 12px}
  .cin-kb img{width:min(520px,92vw);max-height:16vh}
  .cin-frase{font-size:15px}
  .cin-botoes{gap:12px}.cin-btn{padding:12px 16px;font-size:13px;letter-spacing:.04em}
  .cin-btn.jogar{width:100%;max-width:340px;justify-content:center;padding:17px 24px;font-size:18px}
  .cin-dica{font-size:11px;bottom:14px}
  html.cin-on #cin-pontos{right:6px;gap:8px}#cin-pontos button{width:8px;height:8px}#cin-pontos button span{display:none}
  html.cin-on #cin-som{width:36px;height:36px;font-size:15px}
  .cin-caixa > .sec{padding-block:10px 18px}
}
@media (prefers-reduced-motion:reduce){
  .cin-tela,.cin-tela.on{transition-duration:.01s!important;transition-delay:0s!important;transform:none!important}
  .cin-dica,.cin-pulso,.cin-btn.jogar,.cin-btn::after{animation:none!important}
}