/* ============================================================================
   pet-companion.css — mascotes animados + bichinho acompanhante dentro dos jogos
   dono: agente "companheiro"
   Carregado DEPOIS de css/style.css (index.html), entao pode sobrescrever.
   ============================================================================ */

:root {
    --pc-ink: #1B1235;
    --pc-ink-soft: #3B2A6B;
    --pc-paper: #FFF6E9;
    --pc-mango: #FF8A3D;
    --pc-bubble: #FF5E9C;
    --pc-lime: #B8E62D;
    --pc-teal: #2FD4C6;
    --pc-grape: #8B5CF6;
    --pc-sun: #FFD23F;
    --pc-size: 80px;
}

/* ------------------------------------------------------------------ MASCOTE */
/* style.css corta o wrap num circulo (era pra caber o Lottie). A arte nova tem
   orelha, asa e chifre que passam do circulo — libera o overflow. */
.pet-lottie-wrap.pc-wrap {
    overflow: visible;
    border-radius: 0;
    background: none;
}
.pc-art { width: 100%; height: 100%; display: block; }
.pc-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* entrada com mola (DESIGN.md secao 6) */
.pc-svg { animation: pcEnter .42s cubic-bezier(.34, 1.56, .64, 1) both; }
.pc-svg.pc-no-entry { animation: none; }
@keyframes pcEnter {
    0%   { transform: scale(.55) translateY(10px); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-3px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- idle: flutua, respira, pisca, mexe orelha/asa --- */
.pc-svg .pc-bob {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: pcBob 3.4s ease-in-out infinite;
}
.pc-svg .pc-breathe {
    transform-box: fill-box; transform-origin: 50% 92%;
    animation: pcBreathe 2.7s ease-in-out infinite;
}
.pc-svg .pc-eye {
    transform-box: fill-box; transform-origin: center;
    animation: pcBlink 5.2s ease-in-out infinite;
}
.pc-svg .pc-ground {
    transform-box: fill-box; transform-origin: center;
    opacity: .17;
    animation: pcGround 3.4s ease-in-out infinite;
}
.pc-svg .pc-ear { transform-box: fill-box; transform-origin: 50% 90%; animation: pcEar 4.6s ease-in-out infinite; }
.pc-svg .pc-ear-r { animation-delay: .35s; }
.pc-svg .pc-wing-l { transform-box: fill-box; transform-origin: 100% 50%; animation: pcWing 1.5s ease-in-out infinite; }
.pc-svg .pc-wing-r { transform-box: fill-box; transform-origin: 0% 50%;   animation: pcWing 1.5s ease-in-out infinite; }
.pc-svg .pc-fan   { transform-box: fill-box; transform-origin: 50% 100%; animation: pcFan 5s ease-in-out infinite; }
.pc-svg .pc-glow  { transform-box: fill-box; transform-origin: center; animation: pcPulse 1.7s ease-in-out infinite; }
.pc-svg .pc-spark { transform-box: fill-box; transform-origin: center; animation: pcTwinkle 2.1s ease-in-out infinite; }
.pc-svg .pc-spark-2 { animation-delay: .8s; }
.pc-svg .pc-tongue { transform-box: fill-box; transform-origin: 50% 0%; animation: pcTongue 2.4s ease-in-out infinite; }

@keyframes pcBob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6px); } }
@keyframes pcBreathe  { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .966); } }
@keyframes pcBlink    { 0%, 91%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(.08); } }
@keyframes pcGround   { 0%, 100% { transform: scaleX(1); opacity: .17; } 50% { transform: scaleX(.9); opacity: .11; } }
@keyframes pcEar      { 0%, 55%, 100% { transform: rotate(0deg); } 65% { transform: rotate(-8deg); } 78% { transform: rotate(4deg); } }
@keyframes pcWing     { 0%, 100% { transform: scaleX(1) } 50% { transform: scaleX(.74) } }
@keyframes pcFan      { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(2deg); } }
@keyframes pcPulse    { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .65; } }
@keyframes pcTwinkle  { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .35; } 50% { transform: scale(1.15) rotate(35deg); opacity: 1; } }
@keyframes pcTongue   { 0%, 80%, 100% { transform: scaleY(1); } 90% { transform: scaleY(1.4); } }

/* --- humores --- */
.pc-mood-happy .pc-bob     { animation-duration: .82s; }
.pc-mood-happy .pc-breathe { animation-duration: .6s; }
.pc-mood-sad .pc-bob       { animation-duration: 5.4s; }
.pc-mood-sad .pc-svg       { filter: saturate(.6) brightness(.94); }
.pc-mood-sad .pc-eye       { animation: none; transform: scaleY(.62); }
.pc-mood-sad .pc-mouth     { transform-box: fill-box; transform-origin: center; transform: translateY(6px) scaleY(-1); }
.pc-mood-sleeping .pc-eye  { animation: none; transform: scaleY(.09); }
.pc-mood-sleeping .pc-svg  { filter: saturate(.7) brightness(.88); }
.pc-mood-sleeping .pc-bob  { animation-duration: 5.5s; }
.pc-mood-hungry .pc-bob    { animation: pcShake 1.1s ease-in-out infinite; }
.pc-mood-eating .pc-breathe{ animation-duration: .45s; }
@keyframes pcShake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-2px) } 75% { transform: translateX(2px) } }

/* --- reacao ao toque --- */
.pc-excited .pc-bob     { animation: pcJump .5s cubic-bezier(.34, 1.56, .64, 1) 2; }
.pc-excited .pc-breathe { animation-duration: .5s; }
@keyframes pcJump { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9px) scale(1.06, .95); } }

/* ================================================== COMPANHEIRO DENTRO DO JOGO */

#pet-companion {
    position: fixed;
    z-index: 900;               /* abaixo de modais/popup do app (999+) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;       /* so o pet e os botoes recebem toque */
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
#pet-companion.pc-pos-br { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
#pet-companion.pc-pos-bl { left: 10px;  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; }
#pet-companion.pc-pos-tr { right: 10px; top: calc(64px + env(safe-area-inset-top, 0px)); align-items: flex-end; flex-direction: column-reverse; }
#pet-companion.pc-pos-tl { left: 10px;  top: calc(64px + env(safe-area-inset-top, 0px)); align-items: flex-start; flex-direction: column-reverse; }

/* entrada */
#pet-companion.pc-in .pc-pet { animation: pcCompIn .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pcCompIn {
    0%   { transform: translateY(40px) scale(.5); opacity: 0; }
    65%  { transform: translateY(-6px) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* recolhido: nao atrapalha e nao rouba toque (a aparencia esta na secao PAINEL) */
#pet-companion.pc-away .pc-pet { pointer-events: auto; }
/* canto congestionado: vira so enfeite */
#pet-companion.pc-shy { opacity: .55; }
#pet-companion.pc-shy .pc-pet { pointer-events: auto; }   /* toque simples e repassado pro jogo (passThrough) */
#pet-companion.pc-shy.pc-offering { opacity: 1; }
#pet-companion.pc-shy.pc-offering .pc-pet { pointer-events: auto; }

.pc-pet {
    position: relative;
    width: var(--pc-size);
    height: var(--pc-size);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 4px 0 rgba(27, 18, 53, .22));
}
.pc-pet-art { display: block; width: 100%; height: 100%; }
.pc-fallback-emoji { font-size: calc(var(--pc-size) * .62); line-height: var(--pc-size); }

/* selo de "poder pronto" */
.pc-badge {
    position: absolute;
    right: -2px; top: -2px;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    background: var(--pc-sun);
    border: 2.5px solid var(--pc-ink);
    box-shadow: 0 2px 0 var(--pc-ink-soft);
    color: var(--pc-ink);
    font: 800 12px/15px 'Nunito', system-ui, sans-serif;
    display: flex; align-items: center; justify-content: center;
}
#pet-companion.pc-ready .pc-pet { animation: pcReady 2.4s ease-in-out infinite; }
@keyframes pcReady { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

/* --- reacoes --- */
#pet-companion.pc-react-acerto .pc-pet  { animation: pcJoy .55s cubic-bezier(.34, 1.56, .64, 1) 2; }
#pet-companion.pc-react-vitoria .pc-pet { animation: pcJoy .5s cubic-bezier(.34, 1.56, .64, 1) 5; }
#pet-companion.pc-react-erro .pc-pet    { animation: pcNudge .5s ease-in-out 2; }
#pet-companion.pc-react-quase .pc-pet   { animation: pcNudge .6s ease-in-out 1; }
#pet-companion.pc-react-escudo .pc-pet,
#pet-companion.pc-react-poder .pc-pet   { animation: pcPower .6s cubic-bezier(.34, 1.56, .64, 1) 2; }
#pet-companion.pc-react-acerto .pc-svg,
#pet-companion.pc-react-vitoria .pc-svg { filter: drop-shadow(0 0 10px rgba(255, 210, 63, .85)); }
#pet-companion.pc-react-erro .pc-svg    { filter: saturate(.7); }
#pet-companion.pc-react-poder .pc-svg   { filter: drop-shadow(0 0 12px rgba(139, 92, 246, .9)); }
@keyframes pcJoy   { 0%, 100% { transform: translateY(0) rotate(0) } 40% { transform: translateY(-14px) rotate(-6deg) } 70% { transform: translateY(-4px) rotate(4deg) } }
@keyframes pcNudge { 0%, 100% { transform: translateX(0) rotate(0) } 30% { transform: translateX(-4px) rotate(-4deg) } 70% { transform: translateX(4px) rotate(4deg) } }
@keyframes pcPower { 0% { transform: scale(1) } 45% { transform: scale(1.22) rotate(-8deg) } 100% { transform: scale(1) } }

/* --- balao --- */
.pc-bubble {
    position: relative;
    pointer-events: auto;
    max-width: min(78vw, 300px);
    background: var(--pc-paper);
    border: 3px solid var(--pc-ink);
    border-radius: 18px;
    box-shadow: 0 6px 0 var(--pc-ink-soft);
    padding: 10px 12px;
    animation: pcBubbleIn .32s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pc-bubble[hidden] { display: none; }
@keyframes pcBubbleIn { from { transform: scale(.82) translateY(8px); opacity: 0 } to { transform: scale(1) translateY(0); opacity: 1 } }

/* O balao nao tem uma letra: quem le e o ouvido (o pet fala junto). Na tela
   fica um emoji grande, que crianca de 2 anos entende sem saber ler. */
.pc-bubble-sinal {
    margin: 0 0 8px;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 2px 3px rgba(59, 42, 107, .22));
    animation: pcSinalIn .38s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pc-bubble.pc-bubble-toast .pc-bubble-sinal { margin: 0; }
@keyframes pcSinalIn { from { transform: scale(.5) rotate(-12deg) } to { transform: scale(1) rotate(0) } }
/* uma linha so: o balao fica baixo e cobre menos area de jogo */
.pc-bubble-actions { display: flex; gap: 6px; align-items: stretch; }
.pc-bubble-actions[hidden] { display: none; }

.pc-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 6px 10px;
    border: 3px solid var(--pc-ink);
    border-radius: 13px;
    font: 800 14px/1.1 'Nunito', system-ui, sans-serif;
    color: var(--pc-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pc-btn-yes { background: linear-gradient(180deg, #FFD9A8, var(--pc-mango)); box-shadow: 0 5px 0 var(--pc-ink-soft); }
.pc-btn-no  { background: #EDE7F6; box-shadow: 0 5px 0 rgba(59, 42, 107, .4); flex: 0 0 auto; padding: 6px 12px; }
.pc-xis { width: 24px; height: 24px; display: block; fill: none; stroke: var(--pc-ink); stroke-width: 3.4; stroke-linecap: round; }
.pc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pc-ink-soft); }
.pc-btn-ico { font-size: 24px; }

.pc-bubble-tail {
    position: absolute;
    bottom: -11px;
    width: 16px; height: 16px;
    background: var(--pc-paper);
    border-right: 3px solid var(--pc-ink);
    border-bottom: 3px solid var(--pc-ink);
    transform: rotate(45deg);
}
#pet-companion.pc-pos-br .pc-bubble-tail,
#pet-companion.pc-pos-tr .pc-bubble-tail { right: 22px; }
#pet-companion.pc-pos-bl .pc-bubble-tail,
#pet-companion.pc-pos-tl .pc-bubble-tail { left: 22px; }
#pet-companion.pc-pos-tr .pc-bubble-tail,
#pet-companion.pc-pos-tl .pc-bubble-tail { bottom: auto; top: -11px; transform: rotate(225deg); }


/* ============================================== PAINEL DO BICHINHO (por toque)
   O pet nunca mais fala sozinho: ele fica translucido no canto e SO abre este
   painel quando a crianca toca nele. Aqui estao as barras de necessidade (as
   mesmas do PetLife) e os botoes de acao — todos so com desenho, sem letra. */

/* padrao: translucido e encostado no canto, pra nao disputar a tela com o jogo */
#pet-companion.pc-away { opacity: .42; }
#pet-companion.pc-away.pc-pos-br { transform: translateX(30%) translateY(16%); }
#pet-companion.pc-away.pc-pos-bl { transform: translateX(-30%) translateY(16%); }
#pet-companion.pc-away.pc-pos-tr { transform: translateX(30%) translateY(-16%); }
#pet-companion.pc-away.pc-pos-tl { transform: translateX(-30%) translateY(-16%); }
#pet-companion.pc-acordado { opacity: 1; }
/* tela de fim de partida (casca em z-index 9200): e onde se pede a chance extra */
#pet-companion.pc-sobre-casca { z-index: 9300; }

.pc-painel {
    position: relative;
    pointer-events: auto;
    width: min(80vw, 268px);
    background: var(--pc-paper);
    border: 3px solid var(--pc-ink);
    border-radius: 20px;
    box-shadow: 0 6px 0 var(--pc-ink-soft);
    padding: 12px 12px 10px;
    animation: pcBubbleIn .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pc-painel[hidden] { display: none; }

.pc-painel-x {
    position: absolute;
    top: -12px; right: -10px;
    width: 34px; height: 34px;
    padding: 0;
    border: 3px solid var(--pc-ink);
    border-radius: 17px;
    background: #EDE7F6;
    box-shadow: 0 3px 0 rgba(59, 42, 107, .4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pc-painel-x:active { transform: translateY(2px); box-shadow: none; }
.pc-painel-x .pc-xis { width: 18px; height: 18px; }

/* --- barras de necessidade --- */
.pc-barras { display: flex; flex-direction: column; gap: 6px; }
.pc-barra { display: flex; align-items: center; gap: 7px; }
.pc-barra-ico { font-size: 17px; width: 22px; text-align: center; }
.pc-barra-trilho {
    flex: 1 1 auto;
    height: 13px;
    border: 2.5px solid var(--pc-ink);
    border-radius: 8px;
    background: #EFE6D8;
    overflow: hidden;
}
.pc-barra-trilho > i {
    display: block; height: 100%;
    background: var(--pc-cor, var(--pc-sun));
    border-radius: 5px 0 0 5px;
    transition: width .4s ease;
}
/* necessidade aberta pulsa: e o que a crianca precisa notar primeiro */
.pc-barra-baixa .pc-barra-ico { animation: pcBarraAlerta 1.2s ease-in-out infinite; }
@keyframes pcBarraAlerta { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.22) } }

/* --- botoes de acao --- */
.pc-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pc-acao {
    flex: 1 1 auto;
    min-width: 56px; min-height: 52px;
    padding: 4px;
    border: 3px solid var(--pc-ink);
    border-radius: 15px;
    background: linear-gradient(180deg, var(--pc-cor-2, #FFEEA8), var(--pc-cor, var(--pc-sun)));
    box-shadow: 0 5px 0 var(--pc-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex; align-items: center; justify-content: center;
}
.pc-acao:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pc-ink-soft); }
.pc-acao-ico { font-size: 26px; line-height: 1; display: inline-flex; }
.pc-acao-cuidar { animation: pcAcaoChama 1.6s ease-in-out infinite; }
@keyframes pcAcaoChama { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* --- desafio da chance extra --- */
.pc-desafio[hidden] { display: none; }
.pc-desafio { text-align: center; }
.pc-desafio-alvo {
    font-size: 46px; line-height: 1;
    margin: 2px 0 10px;
    animation: pcAcaoChama 1.8s ease-in-out infinite;
}
.pc-desafio-ops { display: flex; gap: 8px; justify-content: center; }
.pc-desafio-op {
    flex: 1 1 0;
    min-height: 58px;
    font-size: 30px;
    border: 3px solid var(--pc-ink);
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0 5px 0 var(--pc-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pc-desafio-op:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pc-ink-soft); }
.pc-op-ok  { background: #D6F5C8; animation: pcJoy .5s cubic-bezier(.34, 1.56, .64, 1) 2; }
.pc-op-nao { background: #FFD9D9; animation: pcNudge .45s ease-in-out 2; }

/* ------------------------------------------------------- efeitos dos poderes */
.pc-fx-glow {
    animation: pcFxGlow 1s ease-in-out infinite !important;
    outline: 3px solid var(--pc-sun);
    outline-offset: 2px;
    border-radius: 14px;
}
@keyframes pcFxGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .0); }
    50%      { box-shadow: 0 0 16px 5px rgba(255, 210, 63, .85); }
}
.pc-fx-big > * { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); transform: scale(1.12); }
.pc-fx-dim { opacity: .3 !important; filter: grayscale(.7); transition: opacity .3s ease; }
.pc-fx-burn { animation: pcFxBurn .45s ease-in forwards; }
@keyframes pcFxBurn { to { transform: scale(.3) rotate(14deg); opacity: 0; } }
.pc-fx-gone { display: none !important; }
.pc-fx-shield { animation: pcFxShield .8s ease-out; }
@keyframes pcFxShield {
    0%   { box-shadow: 0 0 0 0 rgba(47, 212, 198, .9); }
    100% { box-shadow: 0 0 0 22px rgba(47, 212, 198, 0); }
}
.pc-fx-shuffle > * { animation: pcFxShuffle .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pcFxShuffle { 0% { transform: rotateY(90deg) scale(.7); opacity: .3 } 100% { transform: none; opacity: 1 } }

/* ------------------------------------------------------------ acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .pc-svg, .pc-svg *,
    #pet-companion, #pet-companion *,
    .pc-fx-glow, .pc-fx-big > *, .pc-fx-shuffle > * {
        animation: none !important;
        transition: none !important;
    }
    .pc-svg { opacity: 1; transform: none; }
    #pet-companion.pc-away { transform: none; opacity: .5; }
    .pc-fx-big > * { transform: scale(1.12); }
}

@media (max-width: 360px) {
    :root { --pc-size: 62px; }
    .pc-bubble-sinal { font-size: 34px; }
}

/* ====================================================== PODERES: COR E ESTADO */
/* Cada poder tem a cor da sua natureza (DESIGN.md secao 2). A cor entra por
   variavel para o balao, o selo, o estouro e o clarao falarem a mesma lingua. */
.pc-cor-mango  { --pc-cor: var(--pc-mango);  --pc-cor-2: #FFD9A8; }
.pc-cor-bubble { --pc-cor: var(--pc-bubble); --pc-cor-2: #FFC2DA; }
.pc-cor-lime   { --pc-cor: var(--pc-lime);   --pc-cor-2: #E8FCA6; }
.pc-cor-teal   { --pc-cor: var(--pc-teal);   --pc-cor-2: #B4F3ED; }
.pc-cor-grape  { --pc-cor: var(--pc-grape);  --pc-cor-2: #D6C4FF; }
.pc-cor-sun    { --pc-cor: var(--pc-sun);    --pc-cor-2: #FFEEA8; }

.pc-btn-yes[class*="pc-cor-"] {
    background: linear-gradient(180deg, var(--pc-cor-2), var(--pc-cor));
}
.pc-btn-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.pc-btn-ico svg { display: block; }

/* selo do poder: icone do IconSet + quantas ajudas ainda restam */
.pc-badge {
    padding: 0 4px;
    gap: 2px;
    background: var(--pc-cor, var(--pc-sun));
}
/* `display:flex` na regra base do selo vencia o atributo [hidden] do HTML:
   sem isso o selo ficava sempre na tela, vazio, quando nao havia poder. */
.pc-badge[hidden] { display: none; }
.pc-badge-ico { display: inline-flex; align-items: center; }
.pc-badge-ico svg { display: block; width: 13px; height: 13px; }
.pc-badge b { font: 800 11px/1 'Nunito', system-ui, sans-serif; }

/* a casca (capa, trilha, vitoria, derrota) esta aberta: o pet sai da frente */
#pet-companion.pc-hidden { opacity: 0; pointer-events: none; transform: scale(.7); }

/* ------------------------------------------------------------ pet murchinho */
/* Sem sermao e sem culpa: ele so fica sem pique e pede carinho. */
#pet-companion.pc-care .pc-pet-art { filter: saturate(.5) brightness(.93); }
#pet-companion.pc-care .pc-pet,
#pet-companion.pc-care.pc-ready .pc-pet { animation: pcDroop 4.6s ease-in-out infinite; }
@keyframes pcDroop {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(3px) rotate(2deg); }
}
#pet-companion.pc-care .pc-btn-yes { background: linear-gradient(180deg, #FFC2DA, var(--pc-bubble)); }

/* coracoes do carinho */
.pc-hearts {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: visible;
}
.pc-heart {
    position: absolute;
    bottom: 55%;
    font-size: 17px;
    line-height: 1;
    animation: pcHeartUp 1.3s cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes pcHeartUp {
    0%   { transform: translateY(0) scale(.4); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateY(-58px) scale(1.15) rotate(12deg); opacity: 0; }
}

/* ------------------------------------------------- estouro do poder ativado */
.pc-burst {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pc-burst[hidden] { display: none; }
.pc-burst-ring, .pc-burst-ray, .pc-burst-ico {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.pc-burst-ring {
    width: 100%; height: 100%;
    border: 4px solid var(--pc-cor, var(--pc-grape));
    border-radius: 50%;
    opacity: 0;
}
/* raios de papel recortado saindo do bichinho */
.pc-burst-ray {
    width: 150%; height: 150%;
    border-radius: 50%;
    opacity: 0;
    background:
        conic-gradient(from 0deg,
            var(--pc-cor, var(--pc-grape)) 0 6deg, transparent 6deg 45deg,
            var(--pc-cor, var(--pc-grape)) 45deg 51deg, transparent 51deg 90deg,
            var(--pc-cor, var(--pc-grape)) 90deg 96deg, transparent 96deg 135deg,
            var(--pc-cor, var(--pc-grape)) 135deg 141deg, transparent 141deg 180deg,
            var(--pc-cor, var(--pc-grape)) 180deg 186deg, transparent 186deg 225deg,
            var(--pc-cor, var(--pc-grape)) 225deg 231deg, transparent 231deg 270deg,
            var(--pc-cor, var(--pc-grape)) 270deg 276deg, transparent 276deg 315deg,
            var(--pc-cor, var(--pc-grape)) 315deg 321deg, transparent 321deg 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 42%, #000 46%);
            mask: radial-gradient(closest-side, transparent 42%, #000 46%);
}
.pc-burst-ico {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--pc-paper);
    border: 3px solid var(--pc-ink);
    box-shadow: 0 4px 0 var(--pc-ink-soft);
    color: var(--pc-cor, var(--pc-grape));
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
}
.pc-burst-ico svg { display: block; width: 30px; height: 30px; }
.pc-burst-run .pc-burst-ring { animation: pcBurstRing .85s cubic-bezier(.2, .7, .4, 1) both; }
.pc-burst-run .pc-burst-ray  { animation: pcBurstRay .8s cubic-bezier(.2, .7, .4, 1) both; }
.pc-burst-run .pc-burst-ico  { animation: pcBurstIco 1.15s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pcBurstRing {
    0%   { transform: translate(-50%, -50%) scale(.35); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}
@keyframes pcBurstRay {
    0%   { transform: translate(-50%, -50%) scale(.3) rotate(0deg); opacity: .95; }
    100% { transform: translate(-50%, -50%) scale(1.5) rotate(38deg); opacity: 0; }
}
@keyframes pcBurstIco {
    0%   { transform: translate(-50%, -50%) scale(.2) rotate(-25deg); opacity: 0; }
    35%  { transform: translate(-50%, -80%) scale(1.15) rotate(6deg); opacity: 1; }
    70%  { transform: translate(-50%, -95%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -130%) scale(.85); opacity: 0; }
}

/* clarao curtinho na cor do poder — nunca cobre toque nem HUD */
.pc-flash {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 899;
    background: radial-gradient(circle at 78% 82%,
                var(--pc-cor, #8B5CF6) 0%, transparent 58%);
    opacity: .38;
    animation: pcFlash .7s ease-out both;
}
@keyframes pcFlash { 0% { opacity: 0 } 22% { opacity: .38 } 100% { opacity: 0 } }

/* alvo individual aumentado (Salto do Pip em jogo sem grade de opcoes) */
.pc-fx-big-el {
    transform: scale(1.14);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .pc-burst, .pc-flash, .pc-heart { display: none !important; }
    #pet-companion.pc-care .pc-pet { animation: none !important; }
    .pc-fx-big-el { transition: none !important; }
}

/* ==================================== pegar no dedo: arrastar, rodar, cocegas */
/* A posicao escolhida pela crianca entra como variavel; as classes de canto
   continuam mandando no alinhamento do balao e no lado pra onde ele recolhe. */
#pet-companion.pc-free.pc-pos-br { right: var(--pc-r); bottom: var(--pc-b); left: auto; top: auto; }
#pet-companion.pc-free.pc-pos-bl { left: var(--pc-l);  bottom: var(--pc-b); right: auto; top: auto; }
#pet-companion.pc-free.pc-pos-tr { right: var(--pc-r); top: var(--pc-t); left: auto; bottom: auto; }
#pet-companion.pc-free.pc-pos-tl { left: var(--pc-l);  top: var(--pc-t); right: auto; bottom: auto; }

/* o dedo arrasta o bichinho, nao a pagina */
.pc-pet { touch-action: none; cursor: grab; }
.pc-pet-art { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

/* dedo encostado: ele "afunda" um tiquinho */
#pet-companion.pc-press .pc-pet { transform: scale(.93); transition: transform .12s ease; }

/* no ar, na mao da crianca */
#pet-companion.pc-drag { z-index: 950; transition: none; }
#pet-companion.pc-drag .pc-pet {
    transform: scale(1.14);
    cursor: grabbing;
    filter: drop-shadow(0 12px 8px rgba(27, 18, 53, .3));
}
#pet-companion.pc-drag .pc-pet-art { transition: none; }   /* o giro segue o dedo, sem atraso */

/* aterrissagem: amassa e volta */
#pet-companion.pc-land .pc-pet { animation: pcLand .52s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pcLand {
    0%   { transform: translateY(-10px) scale(1.12, .9); }
    45%  { transform: translateY(0) scale(.86, 1.14); }
    75%  { transform: translateY(0) scale(1.06, .96); }
    100% { transform: none; }
}

/* cambalhota depois do rodopio */
#pet-companion.pc-tumble .pc-pet-art { animation: pcTumble .85s cubic-bezier(.3, .95, .35, 1); }
@keyframes pcTumble {
    0%   { transform: rotate(0deg) scale(1); }
    55%  { transform: rotate(230deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1); }
}

/* tontinho: cabeca balancando devagar depois de rodar demais */
#pet-companion.pc-dizzy .pc-pet-art { animation: pcDizzy 1.15s ease-in-out 2; }
@keyframes pcDizzy {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

/* cocegas: segurou o dedo parado em cima dele */
#pet-companion.pc-tickle .pc-pet-art { animation: pcTickle .5s ease-in-out 2; }
@keyframes pcTickle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-10deg) scale(1.05); }
    75%      { transform: rotate(10deg) scale(1.05); }
}

/* estrelinhas de tontura girando em volta da cabeca */
.pc-stars {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: visible;
}
.pc-star {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    animation: pcStarOrbit 1.25s linear forwards;
}
.pc-star > i {
    position: absolute;
    display: block;
    font-size: 16px; line-height: 1;
    font-style: normal;
    transform: translate(-50%, -50%) translateY(calc(var(--pc-size) * -.62));
}
@keyframes pcStarOrbit {
    0%   { transform: rotate(var(--pc-star-a, 0deg)) scale(.5); opacity: 0; }
    18%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: rotate(calc(var(--pc-star-a, 0deg) + 520deg)) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-star { display: none !important; }
    #pet-companion.pc-drag .pc-pet { transform: scale(1.1); }
}

/* Modo "so torcida" (padrao): o bichinho aparece e fala, mas nao disputa o toque
   com o jogo. Ele CONTINUA pegavel no dedo (arrastar de canto, cocegas, rodopio)
   — o que o JS faz e repassar o toque simples pro jogo que esta embaixo, em vez
   de matar o pointer-events e deixar a crianca sem conseguir mexer nele. */
#pet-companion.pc-passivo .pc-pet { pointer-events: auto; cursor: grab; }
#pet-companion.pc-passivo.pc-drag .pc-pet { cursor: grabbing; }
#pet-companion.pc-passivo .pc-bubble { pointer-events: none; }
#pet-companion.pc-passivo.pc-offering .pc-bubble { pointer-events: auto; }