/* MNDN Jornada v70: tela de jogos com capas + 15 jogos novos */

/* ---------- tela de jogos ---------- */
.fl-secao{margin:18px 0 6px}
.fl-secao h3{margin:0 0 8px;color:#fff;font-size:18px}
.fl-fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,230px);gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.fl-card{scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0 0 10px;text-align:left;border-radius:16px;border:3px solid #6b3f1d;background:#fff8e6;box-shadow:0 5px 0 #6b3f1d;cursor:pointer;overflow:hidden;font-family:system-ui,sans-serif;color:#2a1c0a;transition:transform .15s}
.fl-card:hover,.fl-card:focus-visible{transform:translateY(-4px)}
.fl-card:active{transform:translateY(2px);box-shadow:0 2px 0 #6b3f1d}
.fl-capa{position:relative;display:block;width:100%;aspect-ratio:8/5;background:#d9c9a3;overflow:hidden}
.fl-capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.fl-card:hover .fl-capa img{transform:scale(1.06)}
.fl-tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:8px;background:#e2463b;color:#fff;font:900 11px system-ui;font-style:normal;letter-spacing:.04em;animation:flAoVivo 1.6s ease-in-out infinite}
@keyframes flAoVivo{50%{opacity:.6}}
.fl-nome{padding:8px 10px 0;font-weight:900;font-size:15px;line-height:1.2}
.fl-card small{padding:0 10px;font-size:12.5px;color:#5a4426}
.fl-card .fl-rec{padding:0 10px;font-size:12.5px;font-weight:700;color:#1c6a4a}
.fl-rodape{margin-top:6px;font-size:13px;opacity:.85}

.fl-torneio{display:flex;gap:14px;align-items:stretch;padding:12px;border-radius:18px;background:linear-gradient(120deg,#f4c430,#f08a24);border:3px solid #6b3f1d;box-shadow:0 5px 0 #6b3f1d;color:#2a1c0a;margin-top:6px}
.fl-tor-capa{width:190px;flex:0 0 190px;border-radius:12px;object-fit:cover;aspect-ratio:8/5;align-self:center}
.fl-tor-txt{flex:1;min-width:0}
.fl-tor-txt small{font-weight:900;font-size:11px;letter-spacing:.06em}
.fl-tor-txt h3{margin:2px 0 4px;font-size:20px}
.fl-tor-txt p{margin:0 0 6px;font-size:14px}
.fl-tor-top{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.fl-tor-top li{padding:4px 9px;border-radius:10px;background:#fff8;font-size:13px}
.fl-tor-top li.eu{background:#fff;font-weight:800}
.fl-tor-camp{font-size:12.5px!important;opacity:.9}
.fl-tor-btns{display:flex;flex-wrap:wrap;gap:8px}
.fl-tor-btns button{padding:9px 14px;border:0;border-radius:10px;background:#fff8e6;color:#4a2d12;font:900 14px system-ui;cursor:pointer}
@media (max-width:600px){.fl-torneio{flex-direction:column}.fl-tor-capa{width:100%;flex-basis:auto}.fl-fila{grid-auto-columns:minmax(170px,62%)}}

.fl-carregando{position:fixed;inset:0;z-index:24500;display:flex;align-items:center;justify-content:center;background:#0d1b2acc;padding:16px}
.fl-carregando>div{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;padding:14px;border-radius:18px;background:#fff8e6;color:#2a1c0a;text-align:center;animation:anmPop .3s ease}
.fl-carregando img{width:100%;border-radius:12px}
.fl-roda{width:34px;height:34px;border-radius:50%;border:4px solid #e9dcc0;border-top-color:#1c8058;animation:flGira .8s linear infinite}
.fl-carregando button{padding:9px 16px;border:0;border-radius:10px;background:#1c8058;color:#fff;font:900 14px system-ui}
@keyframes flGira{to{transform:rotate(360deg)}}

/* ---------- comuns dos jogos novos ---------- */
.pk-dica{margin:6px 0;color:#fff;text-align:center;line-height:1.4;font-size:14px}
.pk-info,.pk-relogio,.pk-combo{font-weight:800}
.ar-overlay .pk-info{color:#fff;text-align:center;margin:6px 0}

/* memória */
.ar-memoria .ar-palco{flex-direction:column}
.pk-mem-topo{color:#fff;font-weight:800;margin-bottom:6px}
.pk-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,calc((100vh - 220px) * .8),520px)}
.pk-carta{position:relative;aspect-ratio:4/5;border:0;padding:0;background:none;cursor:pointer;perspective:600px}
.pk-carta>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;border:3px solid #6b3f1d;backface-visibility:hidden;transition:transform .35s ease}
.pk-carta .tras{background:repeating-linear-gradient(45deg,#8b5a2b 0 10px,#7a4e25 10px 20px)}
.pk-carta .tras img{width:70%;max-width:80px}
.pk-carta .frente{transform:rotateY(180deg);background:#fff8e6;padding:4px}
.pk-carta .frente.d{background:#ffe9d0}.pk-carta .frente.c{background:#e3f5e1}
.pk-carta .frente i{font-style:normal;font-size:clamp(22px,6vw,38px)}
.pk-carta .frente b{font-size:clamp(10px,2.6vw,13px);line-height:1.15;color:#2a1c0a;text-align:center}
.pk-carta.vira .tras{transform:rotateY(180deg)}.pk-carta.vira .frente{transform:rotateY(0)}
.pk-carta.feita .frente{box-shadow:0 0 0 3px #5cd68a;animation:anmPop .4s ease}

/* caça-palavras */
.ar-cacapalavras .ar-palco{overflow:auto;align-items:flex-start}
.pk-caca{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%}
.pk-caca-g{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(100%,460px)}
.pk-caca-g button{aspect-ratio:1;border:0;border-radius:6px;background:#fff;color:#1c2a3a;font:900 clamp(13px,3.6vw,20px) system-ui;cursor:pointer;padding:0;touch-action:manipulation}
.pk-caca-g button.ini{background:#ffd34d;box-shadow:inset 0 0 0 2px #c58b00}
.pk-caca-g button.achada{background:var(--cor)}
.pk-caca-g button.erro{background:#f7a1a1}
.pk-caca-lado{flex:1 1 240px;max-width:380px;background:#fff8e6;color:#2a1c0a;border-radius:14px;padding:10px 14px}
.pk-caca-lado .pk-dica{color:#2a1c0a;text-align:left}
.pk-caca-lado ul{margin:6px 0 10px;padding-left:18px;font-size:13.5px;line-height:1.5}
.pk-caca-lado li.feita{color:#1c8058}

/* forca */
.pk-forca{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;width:100%}
.pk-arvore{position:relative;width:min(70vw,240px);aspect-ratio:1}
.pk-arvore img{width:100%;height:100%;object-fit:contain}
.pk-arvore .pk-folha{position:absolute;font-size:30px;left:calc(8% + var(--i) * 15%);top:calc(6% + (var(--i) % 2) * 12%);transition:transform .9s ease-in,opacity .9s}
.pk-arvore .pk-folha.cai{transform:translateY(240px) rotate(160deg);opacity:0}
.pk-forca-lado{flex:1 1 300px;max-width:440px;display:flex;flex-direction:column;gap:10px}
.pk-forca-lado .pk-dica{background:#fff8e6;color:#2a1c0a;border-radius:12px;padding:10px;text-align:left;margin:0}
.pk-palavra{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.pk-palavra span{width:28px;height:38px;border-bottom:4px solid #fff;color:#fff;font:900 24px system-ui;display:flex;align-items:flex-end;justify-content:center}
.pk-palavra span.ok{color:#ffe680}
.ar-cz-teclado button.ok{background:#8fdcaa}.ar-cz-teclado button.erro{background:#c9b8a3;color:#7a6a5a}
.ar-cz-teclado button:disabled{box-shadow:none;transform:translateY(2px)}

/* quiz */
.pk-quiz{width:min(100%,640px);background:#fff8e6;color:#2a1c0a;border-radius:18px;padding:16px;border:3px solid #6b3f1d;box-shadow:0 5px 0 #6b3f1d}
.pk-quiz-topo{display:flex;justify-content:space-between;font-weight:800;font-size:14px}
.pk-mult{padding:2px 10px;border-radius:10px;background:#7c4dbe;color:#fff}
.pk-tempo{height:8px;border-radius:4px;background:#e9dcc0;margin:8px 0;overflow:hidden}
.pk-tempo i{display:block;height:100%;background:linear-gradient(90deg,#1c8058,#f4c430,#e2463b);animation:pkTempo linear forwards;transform-origin:left}
@keyframes pkTempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.pk-quiz h3{margin:6px 0 12px;font-size:clamp(17px,4.4vw,22px);line-height:1.3}
.pk-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-ops button{display:flex;gap:8px;align-items:center;text-align:left;padding:12px;border-radius:12px;border:3px solid #6b3f1d;background:#fff;color:#2a1c0a;font:700 15px system-ui;cursor:pointer;box-shadow:0 3px 0 #6b3f1d;min-height:56px}
.pk-ops button kbd{flex:0 0 26px;height:26px;border-radius:7px;background:#f7d974;display:flex;align-items:center;justify-content:center;font:900 13px system-ui}
.pk-ops button.certa{background:#b9ecc9;border-color:#1c8058}
.pk-ops button.errada{background:#f7c1c1;border-color:#b3261e}
.pk-ops button.marcada{background:#fff0b3}
.pk-ops button:disabled{cursor:default}
.pk-exp{margin:10px 0 0;line-height:1.45;min-height:22px}
@media (max-width:520px){.pk-ops{grid-template-columns:1fr}}

/* velha */
.pk-velha{display:flex;flex-direction:column;align-items:center;gap:8px}
.pk-placar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pk-placar span{padding:6px 12px;border-radius:12px;background:#0007;font-weight:800}
.pk-tab{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(86vw,330px,calc(100vh - 300px))}
.pk-tab button{aspect-ratio:1;border:0;border-radius:16px;background:#fff8e6;box-shadow:0 4px 0 #6b3f1d;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:clamp(34px,10vw,60px)}
.pk-tab button img{width:78%;animation:anmPop .3s ease}.pk-tab button span{animation:anmPop .3s ease}
.pk-tab button.linha{background:#b9ecc9}

/* acerte o mosquito */
.pk-mosq{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.pk-mosq-topo{display:flex;gap:12px}.pk-mosq-topo span{padding:5px 12px;border-radius:12px;background:#0007}
.pk-mosq-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(92vw,420px,calc(100vh - 280px));touch-action:manipulation}
.pk-buraco{position:relative;aspect-ratio:1;border:0;border-radius:20px;background:radial-gradient(circle at 50% 75%,#5a8a3a 0 40%,#7cc35a 41%);cursor:pointer;overflow:hidden;box-shadow:inset 0 -6px 0 #4a7a2a}
.pk-buraco .cri{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:clamp(34px,11vw,58px);z-index:2}
.pk-buraco .bicho{position:absolute;left:50%;bottom:30%;transform:translate(-50%,120%) scale(.6);font-size:clamp(32px,10vw,52px);transition:transform .12s ease-out;z-index:1}
.pk-buraco.sobe .bicho{transform:translate(-50%,0) scale(1)}
.pk-buraco .aviso{position:absolute;top:6%;right:8%;font-size:22px;opacity:0;transition:opacity .2s}
.pk-buraco.aberto .aviso{opacity:1;animation:arPula .8s ease infinite}
.pk-buraco.tampado::after{content:"✅";position:absolute;top:6%;left:8%;font-size:22px}
.pk-buraco.mostra::before{content:attr(data-pts);position:absolute;left:50%;top:10%;transform:translateX(-50%);color:#fff;font:900 16px system-ui;text-shadow:0 2px 3px #000;z-index:3;animation:pkSobe .7s ease forwards;white-space:nowrap}
@keyframes pkSobe{to{transform:translate(-50%,-30px);opacity:0}}

/* ligue os canos */
.pk-canos{display:flex;flex-direction:column;align-items:center;width:100%}
.pk-canos-area{position:relative;padding-left:44px}
.pk-caixa{position:absolute;left:0;top:calc((var(--fy) + .5) / var(--n) * 100% - 22px);font-size:36px}
.pk-canos-g{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-auto-rows:1fr;gap:3px;width:min(calc(100vw - 90px),calc(100vh - 330px),440px);background:#6b3f1d;padding:3px;border-radius:12px}
.pk-cano{position:relative;aspect-ratio:1;border:0;padding:0;overflow:hidden;min-width:0;background:#fff8e6;border-radius:6px;cursor:pointer;touch-action:manipulation}
.pk-cano svg{position:absolute;inset:0;display:block;width:100%;height:100%;transform-origin:50% 50%;transform:rotate(calc(var(--r) * 90deg));transition:transform .18s ease}
.pk-cano .pk-tubo{stroke:#9aa5b1;stroke-width:22;fill:none;stroke-linecap:round}
.pk-cano .pk-agua{stroke:#3fa7e0;stroke-width:12;fill:none;stroke-linecap:round;opacity:0;transition:opacity .25s}
.pk-cano .pk-no{fill:#9aa5b1}
.pk-cano.pk-cheio .pk-agua{opacity:1}.pk-cano.pk-cheio .pk-no{fill:#3fa7e0}
.pk-cano .casa{position:absolute;right:2px;top:0;font-size:clamp(14px,4vw,22px);filter:grayscale(1) opacity(.6);pointer-events:none}
.pk-cano.pk-cheio .casa{filter:none;animation:arPula .6s ease}

/* separe o lixo */
.pk-lixo{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,640px)}
.pk-lixo-topo{display:flex;gap:12px}.pk-lixo-topo span{padding:5px 12px;border-radius:12px;background:#0007}
.pk-item{display:flex;flex-direction:column;align-items:center;padding:14px 26px;border-radius:18px;background:#fff8e6;color:#2a1c0a;border:3px solid #6b3f1d;box-shadow:0 5px 0 #6b3f1d;min-width:200px}
.pk-item span{font-size:62px;line-height:1.1}.pk-item b{font-size:18px}
.pk-item.cai{animation:pkCai .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes pkCai{from{transform:translateY(-40px) scale(.8);opacity:0}}
.pk-lixo .pk-exp{color:#fff;text-align:center;min-height:44px;margin:0}
.pk-lixeiras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.pk-lixeiras button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px 10px;border:0;border-radius:14px 14px 8px 8px;color:#fff;cursor:pointer;font:800 13px system-ui;box-shadow:0 5px 0 #0005}
.pk-lixeiras span{font-size:30px}.pk-lixeiras kbd{position:absolute;top:4px;right:6px;font-size:10px;opacity:.7}
.l-rec{background:#2f8fd0}.l-org{background:#7a5230}.l-rej{background:#5f5f5f}.l-esp{background:#d48a1e}
.pk-lixeiras .ok{animation:pkOk .4s ease}.pk-lixeiras .erro{animation:arTreme .35s linear}
@keyframes pkOk{50%{transform:scale(1.1);box-shadow:0 0 0 6px #5cd68a}}
@media (max-width:520px){.pk-lixeiras{grid-template-columns:1fr 1fr}}

/* defenda a vila */
.ar-defesa .ar-palco{position:relative}
.pk-def-hud{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;pointer-events:none}
.pk-def-hud span{padding:4px 10px;border-radius:10px;background:#000a;font-weight:800;font-size:13px;white-space:nowrap}
.pk-def-menu{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:96%;padding:10px;border-radius:16px;background:#fff8e6;color:#2a1c0a;border:3px solid #6b3f1d;z-index:4;animation:anmPop .25s ease}
.pk-def-menu b{width:100%;text-align:center}
.pk-def-menu button{display:flex;flex-direction:column;align-items:center;padding:8px 10px;border:2px solid #6b3f1d;border-radius:12px;background:#fff;font:800 13px system-ui;cursor:pointer}
.pk-def-menu button small{font-weight:700;color:#1c6a4a}
.pk-def-menu button:disabled{opacity:.45}

/* sudoku */
.pk-sudo{display:flex;flex-direction:column;align-items:center;gap:10px}
.pk-sudo-g{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:min(88vw,calc(100vh - 320px),400px);padding:4px;border-radius:12px;background:#6b3f1d}
.pk-sudo-g button{aspect-ratio:1;border:0;border-radius:6px;background:#fff8e6;cursor:pointer;padding:0;touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.pk-sudo-g button i,.pk-paleta button i{display:flex;align-items:center;justify-content:center;width:78%;aspect-ratio:1;border-radius:50%;background:var(--c);font-style:normal;font-size:clamp(14px,4.4vw,22px);box-shadow:inset 0 -3px 0 #0003;animation:anmPop .25s ease}
.pk-sudo-g button i{filter:none}.pk-sudo-g button i,.pk-paleta button i{color:transparent;text-shadow:0 0 0 #fff}
.pk-sudo-g button.fixo{background:#ecdcb8}
.pk-sudo-g button.sel{box-shadow:inset 0 0 0 3px #1c8058}
.pk-sudo-g button.conf{background:#f7c1c1}
.pk-sudo-g button.bx{margin-right:4px}.pk-sudo-g button.by{margin-bottom:4px}
.pk-paleta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pk-paleta button{width:50px;height:50px;border-radius:50%;border:3px solid #fff;background:var(--c,#e9dcc0);font-size:22px;cursor:pointer;box-shadow:0 3px 0 #0006;display:flex;align-items:center;justify-content:center;padding:0}
.pk-paleta button i{width:100%;box-shadow:none}

/* ---------- online ---------- */
.on-porta{max-width:620px}
.on-op{padding:10px 12px;border-radius:14px;background:#fff;margin:8px 0}
.on-op b{display:block;margin-bottom:2px}.on-op p{font-size:14px;margin:0 0 8px}
.on-cod{display:flex;gap:8px}
.on-cod input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:2px solid #6b3f1d;font:900 22px system-ui;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.on-cod button{padding:10px 16px;border:0;border-radius:10px;background:#1c8058;color:#fff;font:900 15px system-ui;cursor:pointer}
.on-erro,.on-erro2{color:#b3261e;font-weight:700;margin:4px 0 0;min-height:18px}
.on-erro2{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#fff;padding:6px 12px;border-radius:10px}
.on-sala{width:min(100%,640px);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;overflow:auto;max-height:100%}
.on-codigo{display:flex;flex-direction:column;align-items:center;padding:14px 22px;border-radius:18px;background:#fff8e6;color:#2a1c0a;border:3px solid #6b3f1d;box-shadow:0 5px 0 #6b3f1d;text-align:center}
.on-codigo>b{font:900 clamp(40px,12vw,72px) system-ui;letter-spacing:.18em;color:#1c8058}
.on-codigo span{font-size:13px}
.on-espera{text-align:center;margin:0}
.on-lista{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;list-style:none;margin:0;padding:0}
.on-lista li{padding:6px 12px;border-radius:20px;background:#fff2;animation:anmPop .3s ease}
.on-lista li.eu{background:#f7d974;color:#2a1c0a;font-weight:800}.on-lista li.vazio{background:none;opacity:.7}
.on-conta{display:flex;flex-direction:column;align-items:center;color:#fff}
.on-conta b{font:900 120px system-ui;color:#ffe680;animation:anmPop .5s ease infinite alternate}
.on-placar{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;max-height:40vh;overflow:auto}
.on-placar li{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:6px 10px;border-radius:10px;background:#fff}
.on-placar li.eu{background:#d9f2e2;border:2px solid #1c8058}
.on-placar em{font-style:normal;font-weight:900}
.on-resp{padding:2px 10px;border-radius:10px;background:#eef6f0}
.on-podio{width:min(100%,560px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:18px;background:#fff8e6;color:#2a1c0a;border:3px solid #6b3f1d;max-height:100%;overflow:auto}
.on-podio h3{margin:0}
.on-degraus{display:flex;align-items:flex-end;gap:8px}
.on-degraus .d{display:flex;flex-direction:column;align-items:center;width:110px;animation:anmPop .5s ease both}
.on-degraus .d span{font-size:34px}.on-degraus .d b{font-size:14px;text-align:center}.on-degraus .d small{font-size:12px}
.on-degraus .d i{display:block;width:100%;border-radius:8px 8px 0 0;margin-top:4px}
.on-degraus .d1 i{height:90px;background:#ffd700}.on-degraus .d2 i{height:64px;background:#c0c0c0}.on-degraus .d3 i{height:44px;background:#cd7f32}
.on-degraus .d2{animation-delay:.2s}.on-degraus .d3{animation-delay:.35s}
.on-minha{margin:0}
.on-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.on-mini span{position:relative;padding:5px 10px 8px;border-radius:10px;background:#0007;font-size:12.5px;font-weight:700;overflow:hidden}
.on-mini span.eu{background:#1c8058}
.on-mini span i{position:absolute;left:0;bottom:0;height:4px;width:var(--w);background:#ffe680;transition:width .4s}
.on-aguarda{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:12px;background:#1c8058;color:#fff;font-weight:800;z-index:5}

body.reduce-motion .fl-tag,body.reduce-motion .on-conta b{animation:none}
@media (prefers-reduced-motion:reduce){.fl-tag,.on-conta b,.pk-buraco.aberto .aviso{animation:none}}