/* Visual comum dos mini-games da Pipocorn (botao de bala, cartao de inicio/fim, efeitos). */
:root{--rosa:#E4457E;--rosa-escuro:#B92C61;--choc:#3C1E14;--creme:#FFF4DD;--manteiga:#F8B42B;--manteiga-escuro:#D98E0A;
  --fonte-titulo:"Fredoka",system-ui,sans-serif;--fonte-texto:"Nunito",system-ui,sans-serif;--salto:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--fonte-texto);font-weight:700;color:var(--choc);background:linear-gradient(170deg,#FFC2D8 0,#FF86B0 45%,#E4457E 100%);user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--manteiga);outline-offset:3px;border-radius:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.pilula{font-family:var(--fonte-titulo);font-weight:700;background:var(--choc);color:var(--creme);padding:6px 14px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.3);font-size:1.05rem;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pilula b{color:var(--manteiga);font-size:1.25rem;min-width:2ch;text-align:left}
.mudo{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--choc);color:var(--creme);box-shadow:0 4px 0 rgba(0,0,0,.3);font-size:18px;line-height:1}
.tempo{width:100%;height:12px;border-radius:999px;background:rgba(60,30,20,.28);margin:10px 0 8px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.2)}
.tempo i{display:block;height:100%;width:100%;transform-origin:0 50%;background:linear-gradient(#FFE08A,var(--manteiga));border-radius:999px}

.bala{--c1:#FFD86B;--c2:var(--manteiga);--sombra:var(--manteiga-escuro);--tinta:var(--choc);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--fonte-titulo);font-weight:700;font-size:1.2rem;color:var(--tinta);padding:.8em 1.5em;border-radius:999px;background:linear-gradient(var(--c1),var(--c2));
  box-shadow:0 6px 0 var(--sombra),0 12px 22px rgba(60,30,20,.28),inset 0 2px 0 rgba(255,255,255,.7);transition:transform .18s var(--salto)}
.bala::after{content:"";position:absolute;left:12%;right:12%;top:7%;height:36%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.65),transparent);pointer-events:none}
.bala:hover{transform:translateY(-3px) scale(1.04)}.bala:active{transform:translateY(4px)}
.bala.verde{--c1:#6BE08B;--c2:#25B455;--sombra:#178A3C;--tinta:#fff}
.bala.rosa{--c1:#FF86B0;--c2:var(--rosa);--sombra:var(--rosa-escuro);--tinta:#fff}
.bala.pequeno{font-size:1rem;padding:.6em 1.2em}

.veu{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(60,30,20,.45);overflow:auto}
.veu[hidden]{display:none}
.cartao{width:min(100%,400px);max-height:100%;overflow:auto;background:#FFF9EC;border-radius:28px;padding:20px 18px 22px;text-align:center;box-shadow:0 0 0 5px #fff,0 8px 0 5px var(--rosa-escuro),0 24px 50px rgba(0,0,0,.45);animation:cartao .6s var(--salto)}
@keyframes cartao{0%{opacity:0;transform:scale(.4) translateY(60px)}100%{opacity:1;transform:none}}
.candy{font-family:var(--fonte-titulo);font-weight:700;line-height:.95;color:#fff;margin:0;-webkit-text-stroke:.14em var(--choc);paint-order:stroke fill;text-shadow:0 .07em 0 var(--choc),0 .14em .2em rgba(0,0,0,.25)}
.cartao h1{font-size:clamp(2.4rem,11vw,3.4rem);margin:4px 0 4px}
.cartao h2{font-size:clamp(2rem,9vw,2.8rem);margin:0 0 6px}
.passos{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;text-align:left}
.passos li{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid #F3DDB6;border-radius:16px;padding:8px 12px;font-size:.95rem;line-height:1.25;box-shadow:0 3px 0 #F3DDB6}
.passos b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--rosa);color:#fff;font-family:var(--fonte-titulo)}
.faixas{display:flex;gap:8px;justify-content:center;margin:8px 0 4px;flex-wrap:wrap}
.faixas span{background:linear-gradient(#FFE08A,var(--manteiga));border-radius:14px;padding:6px 10px;font-family:var(--fonte-titulo);font-size:.95rem;box-shadow:0 3px 0 var(--manteiga-escuro)}
.miudo{font-size:.78rem;opacity:.75;line-height:1.3;margin:8px 0 0;font-weight:700}
.selo-teste{display:inline-block;background:#E53935;color:#fff;border-radius:999px;font-size:.72rem;padding:.15em .7em;margin-left:6px;vertical-align:middle}
.pontos-grandes{font-family:var(--fonte-titulo);font-weight:700;font-size:3.2rem;color:var(--rosa);line-height:1;margin:2px 0}
.melhor{font-size:.95rem;opacity:.8;margin:0 0 6px}
.premio{margin:12px 0 4px;padding:10px;border-radius:18px;background:#fff;border:2px dashed var(--manteiga)}
.codigo{font-family:var(--fonte-titulo);font-weight:700;font-size:1.7rem;letter-spacing:.06em;color:var(--rosa-escuro);background:#FFF1D6;border-radius:12px;padding:6px 10px;margin:6px 0;user-select:all;-webkit-user-select:all}
.acoes{display:grid;gap:10px;margin-top:12px}

/* link discreto para a Area dos responsaveis (nao compete com o jogo) */
.discreto{background:none;border:0;padding:6px;font:inherit;font-size:.8rem;font-weight:700;color:var(--choc);opacity:.7;text-decoration:underline;cursor:pointer}
.discreto:hover{opacity:1}

/* efeitos soltos */
.pedaco{position:fixed;z-index:60;pointer-events:none;width:var(--t,18px);height:var(--t,18px);left:var(--x);top:var(--y);background:radial-gradient(circle at 35% 30%,#fff,#FFEFC2 55%,#EBC16A);border-radius:50%;box-shadow:inset -2px -3px 0 rgba(200,140,40,.35),0 3px 6px rgba(0,0,0,.2);animation:voa var(--dur,.9s) cubic-bezier(.2,.7,.3,1) forwards}
.pedaco.estrela{border-radius:0;background:var(--cor,#FFD84A);box-shadow:none;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes voa{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}18%{opacity:1;transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) scale(1.1) rotate(calc(var(--r)*.3))}100%{transform:translate(var(--dx),calc(var(--dy) + 240px)) scale(.7) rotate(var(--r));opacity:0}}
.elogio{position:fixed;z-index:70;pointer-events:none;left:var(--x);top:var(--y);font-family:var(--fonte-titulo);font-weight:700;color:#fff;font-size:clamp(1.8rem,9vw,3rem);white-space:nowrap;
  -webkit-text-stroke:.16em var(--contorno,var(--choc));paint-order:stroke fill;text-shadow:0 .07em 0 var(--contorno,var(--choc));transform:translate(-50%,-50%) rotate(var(--giro,-5deg));animation:elogio 1s var(--salto) forwards}
.elogio.pequeno{font-size:clamp(1.2rem,6vw,1.8rem)}
@keyframes elogio{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--giro)) scale(.2)}22%{opacity:1;transform:translate(-50%,-50%) rotate(var(--giro)) scale(1.25)}40%{transform:translate(-50%,-50%) rotate(var(--giro)) scale(.95)}78%{opacity:1;transform:translate(-50%,-85%) rotate(var(--giro)) scale(1)}100%{opacity:0;transform:translate(-50%,-130%) rotate(var(--giro)) scale(1)}}
.tela-fx{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);opacity:0}
.tela-fx.vai{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
@keyframes geleia{0%{transform:scale(1)}25%{transform:scale(1.25,.8)}50%{transform:scale(.88,1.14)}72%{transform:scale(1.07,.94)}100%{transform:scale(1)}}
.chacoalha{animation:chacoalha .3s}
@keyframes chacoalha{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,3px)}}

@media (prefers-reduced-motion:reduce){
  .cartao,.elogio,.pedaco,.tela-fx.vai,.chacoalha{animation:none!important}
}