/* Mundo Coloricos Jogos (app) — tela inicial */
@import url("fonts.css");
:root{--amarelo:#FAF494;--mila:#FFD21F;--mila-escuro:#E0A800;--azul-claro:#99D9FD;--nino:#2F6FE0;--azul:#0452DA;--coral:#FA5C59;--teco:#E8261F;--vinho:#8E1B22;
  --lilas:#E9D7F2;--lilas-forte:#B57FD0;--rosa:#F46FB3;--verde:#3DBE6B;--laranja:#FF9A2E;--creme:#FFFBEC;--tinta:#1D2558;
  --titulo:"Baloo 2","Fredoka",system-ui,sans-serif;--texto:"Fredoka","Baloo 2",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overscroll-behavior-y:none}
body{margin:0;min-height:100vh;font-family:var(--texto);font-weight:600;color:var(--tinta);background:var(--creme);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
img{display:block;-webkit-user-drag:none}
button{font-family:inherit;color:inherit}
.ic{width:1.3em;height:1.3em;flex:none;color:var(--teco);overflow:visible}

/* topo */
.topo{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) max(14px,3vw) 10px;background:var(--amarelo)}
.marca{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.marca img{width:56px;height:56px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 3px var(--azul);flex:none}
.marca>span{font-family:var(--titulo);font-weight:800;font-size:clamp(1.25rem,4.6vw,1.8rem);line-height:1;white-space:nowrap}
.marca b{color:var(--mila-escuro)}.marca i{font-style:normal;color:var(--nino)}.marca em{font-style:normal;color:var(--teco)}
.estrelas{display:inline-flex;align-items:center;gap:6px;background:#fff;border:4px solid var(--tinta);border-radius:999px;padding:2px 14px 2px 6px;font-family:var(--titulo);font-weight:800;font-size:1.35rem;flex:none;box-shadow:0 4px 0 rgba(29,37,88,.2)}
.estrelas .ic{width:34px;height:34px}
.bt-som{width:58px;height:58px;border-radius:50%;border:5px solid var(--azul);background:#fff;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2);flex:none}
.bt-som .ic{width:32px;height:32px}
.bt-som:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.2)}

/* boas-vindas com a Mila, o Nino e o Teco (sempre inteiros: sem cortes) */
.ola{position:relative;background:linear-gradient(90deg,var(--amarelo) 0 33.34%,var(--azul-claro) 0 66.67%,var(--coral) 0);padding:18px 12px 46px;text-align:center}
.balao{position:relative;display:inline-block;background:#fff;border:5px solid var(--tinta);border-radius:30px;padding:6px 26px;font-family:var(--titulo);font-weight:800;font-size:clamp(1.5rem,5.6vw,2.4rem);line-height:1.15;box-shadow:0 7px 0 var(--tinta);transform:rotate(-1.5deg);z-index:2;max-width:94%}
.balao::after{content:"";position:absolute;left:50%;bottom:-22px;margin-left:-14px;border:14px solid transparent;border-top:16px solid var(--tinta)}
.trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2vw,24px);height:clamp(120px,min(26vh,42vw),250px);margin-top:20px;position:relative;z-index:1}
.amigo{height:100%;flex:0 1 auto;min-width:0;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%}
.amigo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.2))}
.amigo.mila{height:84%;animation:pula 2.4s ease-in-out infinite}
.amigo.nino{animation:pula 2.4s .3s ease-in-out infinite}
.amigo.teco{height:88%;animation:pula 2.4s .6s ease-in-out infinite}
.amigo.oi{animation:oi .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pula{50%{transform:translateY(-8px)}}
@keyframes oi{40%{transform:translateY(-26px) scale(1.06) rotate(-4deg)}}
.onda{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:46px;display:block}

/* grade de jogos */
.jogos{padding:6px max(14px,3vw) 24px;max-width:1180px;margin:0 auto}
.jogos h1{font-family:var(--titulo);font-weight:800;font-size:clamp(1.6rem,5vw,2.3rem);text-align:center;margin:4px 0 16px;color:var(--azul)}
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{--c:#FFE98A;--s:var(--mila-escuro);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--tinta);
  background:var(--c);border:5px solid #fff;border-radius:30px;padding:12px 10px 14px;box-shadow:0 9px 0 var(--s),0 16px 24px rgba(0,0,0,.1);
  transition:transform .15s,box-shadow .15s;animation:entra .5s calc(var(--i)*60ms) both cubic-bezier(.3,1.5,.5,1)}
.card:active,.card.toque{transform:translateY(6px) scale(.98);box-shadow:0 3px 0 var(--s)}
.card:focus-visible{outline:5px solid var(--tinta);outline-offset:3px}
.card .arte{width:100%;height:clamp(118px,34vw,190px);display:flex;align-items:center;justify-content:center;padding:4px}
.card .arte img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.2))}
.card .nome{font-family:var(--titulo);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.6rem);line-height:1.1;margin:8px 0 10px;min-height:2.2em;display:flex;align-items:center}
.card .jogar{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18);margin-top:auto}
.card .jogar .ic{width:42px;height:42px}
.card.azul{--c:var(--azul-claro);--s:var(--nino)}
.card.vermelho{--c:#FFB3AE;--s:var(--teco)}
.card.lilas{--c:var(--lilas);--s:var(--lilas-forte)}
.card.verde{--c:#BDEFC9;--s:var(--verde)}
.card.laranja{--c:#FFD8A8;--s:var(--laranja)}
.card.rosa{--c:#FFD0E7;--s:var(--rosa)}
@keyframes entra{from{opacity:0;transform:translateY(24px) scale(.9)}}

.pais{max-width:760px;margin:6px auto 0;padding:14px 18px calc(24px + env(safe-area-inset-bottom));text-align:center;font-size:.95rem;font-weight:500;color:#4A5180}
.pais p{margin:0 0 10px}
.instalar{font-family:var(--titulo);font-weight:800;font-size:1.1rem;background:var(--azul);color:#fff;border:0;border-radius:999px;padding:10px 24px;box-shadow:0 5px 0 #02348c;cursor:pointer}

/* celular: o último jogo (9º) ocupa a linha inteira */
@media (max-width:699px){.grade .card:last-child:nth-child(odd){grid-column:1/-1}.grade .card:last-child:nth-child(odd) .arte{height:clamp(110px,30vw,170px)}}
@media (min-width:700px){
  .grade{grid-template-columns:repeat(3,1fr);gap:24px}
  .card .arte{height:clamp(150px,20vw,210px)}
  .card .jogar{width:70px;height:70px}.card .jogar .ic{width:48px;height:48px}
}
/* tablet deitado / telas largas e baixas: balão ao lado dos monstrinhos para sobrar espaço para os jogos */
@media (min-width:900px) and (orientation:landscape){
  .ola{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,60px);padding:24px 24px 40px}
  .balao{transform:rotate(-2deg);flex:none}
  .balao::after{left:auto;right:-26px;bottom:50%;margin:0 0 -14px;border:14px solid transparent;border-left:16px solid var(--tinta)}
  .trio{height:clamp(140px,24vh,210px);margin-top:0}
  .card .arte{height:clamp(120px,17vh,170px)}
}
@media (max-width:520px){
  .marca>span{font-size:1.3rem;line-height:.95;white-space:normal}
  .marca .m2,.marca .m1{display:block}
}
@media (max-width:380px){.marca>span{font-size:1.1rem}.marca img{width:46px;height:46px}.estrelas{font-size:1.1rem;padding-right:10px}.estrelas .ic{width:28px;height:28px}.bt-som{width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}