/* ============================================================================
   Pet Virtual "Bit" — SKIN FOFA (candy)
   ----------------------------------------------------------------------------
   Esta folha é a PELE; a estrutura mora na dori-pet.css (que carrega ANTES e
   continua a fonte da verdade de layout, sprite, quintal e especificidade).
   Aqui só a camada decorativa: cantos redondos, pastel, sombras macias,
   molinha bouncy e corações. Reverter o visual = remover o <link> desta folha
   no head.php — nada aqui é estrutural.

   Regras do jogo:
   - Toda cor doce entra por color-mix() EM CIMA dos tokens do tema
     (--surface/--bg/--border/--text) → claro/escuro continuam automáticos.
   - Nenhuma medida de layout muda (palco 96px, painel compactado, padding da
     moldura): raio e sombra não empurram nada.
   - O SPRITE continua retrô (steps) de propósito — pixel art mexe em frames,
     não em curvas. A fofura entra no palco, nos cartões e nos botões.
   - Animação nova/re-declarada aqui TAMBÉM morre no bloco reduced-motion do
     fim (a folha carrega depois da base, então venceria o bloco de lá).

   AS CORES DO BIT (escolhidas na adoção, trocáveis na Lojinha):
   - O "chrome" do painel (moldura, fundo, fome, balão, input, voltar) bebe de
     TRÊS variáveis-líder: --dpetf-c1 (a cor), --dpetf-c2 (a de apoio) e
     --dpetf-forte (a cheia/viva). O JS põe dpet-cor-<cor> no #doriWidget e a
     classe só REDECLARA as líderes — todo o resto segue igual.
   - O que NUNCA muda com a cor: o âmbar de identidade (fio da fase, selo de
     oferta, anel de equipado), os doces fixos dos botões de ação, o lilás da
     Lojinha, o verde do palco e o sprite.
   - Cada cor tem um formato próprio na barra de fome (coração, estrela,
     folhinha, raio, faísca, bolinha) — é o "estilo um pouco diferente".
   ========================================================================== */

:root {
    --dpetf-rosa: #ff8fc1;
    --dpetf-rosa-forte: #ff5c9e;
    --dpetf-lilas: #b79cff;
    --dpetf-mint: #5fd3a5;
    --dpetf-ceu: #7ec3ff;
    --dpetf-coral: #ff8787;
    --dpetf-verde: #69c95e;
    --dpetf-manteiga: #ffd166;
    /* líderes (default = a pele rosa de nascença) */
    --dpetf-c1: var(--dpetf-rosa);
    --dpetf-c2: var(--dpetf-lilas);
    --dpetf-forte: var(--dpetf-rosa-forte);
    /* âmbar #ffc107 e fogo #ff9800 seguem os mesmos da base: são a identidade
       do sprite (fio da fase, moldura de equipado, selo de oferta) */
}

/* ---- As 6 peles: cada classe só troca as variáveis-líder ------------------ */
.dpet-cor-rosa { --dpetf-c1: var(--dpetf-rosa); --dpetf-c2: var(--dpetf-lilas); --dpetf-forte: var(--dpetf-rosa-forte); }
.dpet-cor-ceu { --dpetf-c1: var(--dpetf-ceu); --dpetf-c2: var(--dpetf-mint); --dpetf-forte: #38a1f0; }
.dpet-cor-mint { --dpetf-c1: var(--dpetf-mint); --dpetf-c2: var(--dpetf-ceu); --dpetf-forte: #2dbd8d; }
.dpet-cor-manteiga { --dpetf-c1: var(--dpetf-manteiga); --dpetf-c2: var(--dpetf-coral); --dpetf-forte: #f0a020; }
.dpet-cor-lilas { --dpetf-c1: var(--dpetf-lilas); --dpetf-c2: var(--dpetf-rosa); --dpetf-forte: #8f6bff; }
.dpet-cor-coral { --dpetf-c1: var(--dpetf-coral); --dpetf-c2: var(--dpetf-manteiga); --dpetf-forte: #f25b47; }

/* ---- Header: badge vira bolinha, pulo de festa vira molinha */
.dpet-badge {
    border-radius: 50%;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.dpet-festa { animation: dpet-festa .9s cubic-bezier(.34, 1.56, .64, 1) 2; }

/* ---- Balões: de caixa 8-bit pra bolha de conversa */
.dpet-bubble {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--dpetf-c1) 55%, var(--border, #ccc));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

/* ---- Painel + moldura: adeus serrilhado Game Boy, olá algodão-doce */
.dpet-panel {
    background: color-mix(in srgb, var(--dpetf-c1) 5%, var(--surface, #fff));
}
.dpet-panel:not([hidden]) { animation: dpetf-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dpetf-pop {
    from { transform: translateY(-6px) scale(.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.dpet-frame {
    clip-path: none;
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--dpetf-c1) 38%, var(--border, #ccc));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--dpetf-c1) 8%, var(--bg, #fafafa)),
        color-mix(in srgb, var(--dpetf-c2) 7%, var(--bg, #fafafa)));
}
.dpet-frame::-webkit-scrollbar { width: 8px; }
.dpet-frame::-webkit-scrollbar-track { background: transparent; }
.dpet-frame::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, var(--dpetf-c1) 35%, var(--border, #ccc));
}

/* ---- Palco: grama de primavera com bolinhas (o gradeado vira confete) */
.dpet-stage {
    border-radius: 16px;
    overflow: hidden; /* só pra grama respeitar o canto redondo */
    border-color: color-mix(in srgb, #4d9a45 55%, var(--border, #ccc));
    background:
        radial-gradient(rgba(255, 255, 255, .16) 1.5px, transparent 1.6px) 0 0 / 12px 12px,
        radial-gradient(rgba(255, 255, 255, .10) 1.5px, transparent 1.6px) 6px 6px / 12px 12px,
        #5cb552;
}
.dpet-stage.dq-noite {
    border-color: color-mix(in srgb, #2e5244 60%, var(--border, #ccc));
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.6px) 0 0 / 12px 12px,
        radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.6px) 6px 6px / 12px 12px,
        #2e5244;
}
/* Vagalume vira pontinho que brilha de verdade */
.dq-vagalume { border-radius: 50%; box-shadow: 0 0 6px 1px rgba(255, 193, 7, .8); }
/* Plaquinha do canteiro: pílula branquinha */
.dq-placa {
    border-radius: 99px;
    padding: 3px 9px;
    background: rgba(255, 255, 255, .78);
    font-family: 'Lexend Deca', system-ui, sans-serif;
}
/* Planta madura: mesmo pulinho, sem trancos */
.dq-e-3 .dq-canteiro { animation: dpetf-pulsa 1.1s ease-in-out infinite; }
@keyframes dpetf-pulsa {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ---- HUD: chips viram pílulas pastel */
.dpet-nivel {
    border-radius: 99px;
    padding: 3px 8px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    background: color-mix(in srgb, var(--primary, #0d9488) 12%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--primary, #0d9488) 45%, var(--border, #ccc));
}
.dpet-saldo {
    font-family: 'Lexend Deca', system-ui, sans-serif;
    border-radius: 99px;
    padding: 3px 8px;
    background: color-mix(in srgb, #ffc107 16%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, #ffc107 45%, var(--border, #ccc));
}
.dpet-streak {
    font-family: 'Lexend Deca', system-ui, sans-serif;
    border-radius: 99px;
    padding: 3px 7px;
    background: color-mix(in srgb, #ff9800 13%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, #ff9800 38%, var(--border, #ccc));
}
.dpet-som { border-radius: 50%; }
.dpet-som:hover { background: color-mix(in srgb, var(--dpetf-c1) 14%, var(--surface, #fff)); }

/* Fio da fase: continua âmbar (identidade), só engorda e arredonda */
.dpet-fase-fio {
    height: 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--dpetf-c1) 14%, var(--bg-2, #eee));
}
.dpet-fase-fio i {
    border-radius: 99px;
    background: linear-gradient(90deg, #ffc107, #ff9800);
}

/* ---- FOME: quadradinhos viram CORAÇÕES (a forma da pele rosa; cada cor
   troca a forma mais abaixo). O coração é ::before + ::after rotacionados —
   o <i> em si fica transparente, o JS segue só ligando .dpet-cheia */
.dpet-fome { gap: 3px; }
.dpet-fome i {
    position: relative;
    width: 14px; height: 13px;
    border: 0;
    background: transparent;
    transition: none;
}
.dpet-fome i::before,
.dpet-fome i::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 7px; height: 10px;
    border-radius: 7px 7px 0 0;
    background: color-mix(in srgb, var(--dpetf-c1) 24%, var(--bg-2, #eee));
    transition: background .25s ease;
}
.dpet-fome i::before { left: 7px; transform: rotate(-45deg); transform-origin: 0 100%; }
.dpet-fome i::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.dpet-fome i.dpet-cheia::before,
.dpet-fome i.dpet-cheia::after { background: var(--dpetf-forte); }
.dpet-fome-rotulo::before { content: "♥ " / ""; color: var(--dpetf-forte); }

/* Formas por cor: some o coração (content:none nos pseudos) e o <i> vira a
   forma via clip-path/raio. Cheia = --dpetf-forte; vazia = tinta leve da c1. */
.dpet-cor-ceu .dpet-fome i::before, .dpet-cor-ceu .dpet-fome i::after,
.dpet-cor-mint .dpet-fome i::before, .dpet-cor-mint .dpet-fome i::after,
.dpet-cor-manteiga .dpet-fome i::before, .dpet-cor-manteiga .dpet-fome i::after,
.dpet-cor-lilas .dpet-fome i::before, .dpet-cor-lilas .dpet-fome i::after,
.dpet-cor-coral .dpet-fome i::before, .dpet-cor-coral .dpet-fome i::after { content: none; }
.dpet-cor-ceu .dpet-fome i,
.dpet-cor-mint .dpet-fome i,
.dpet-cor-manteiga .dpet-fome i,
.dpet-cor-lilas .dpet-fome i,
.dpet-cor-coral .dpet-fome i {
    width: 13px;
    background: color-mix(in srgb, var(--dpetf-c1) 26%, var(--bg-2, #eee));
    transition: background .25s ease;
}
.dpet-cor-ceu .dpet-fome i.dpet-cheia,
.dpet-cor-mint .dpet-fome i.dpet-cheia,
.dpet-cor-manteiga .dpet-fome i.dpet-cheia,
.dpet-cor-lilas .dpet-fome i.dpet-cheia,
.dpet-cor-coral .dpet-fome i.dpet-cheia { background: var(--dpetf-forte); border-color: transparent; }
/* céu = estrela · menta = folhinha · sol = raio · lilás = faísca · coral = bolinha */
.dpet-cor-ceu .dpet-fome i { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.dpet-cor-mint .dpet-fome i { border-radius: 85% 0 85% 0; }
.dpet-cor-manteiga .dpet-fome i { clip-path: polygon(58% 0, 20% 58%, 44% 58%, 40% 100%, 80% 40%, 56% 40%); }
.dpet-cor-lilas .dpet-fome i { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.dpet-cor-coral .dpet-fome i { border-radius: 50%; }
/* O simbolinho do rótulo acompanha a forma (é só um enfeite de texto) */
.dpet-cor-ceu .dpet-fome-rotulo::before { content: "★ " / ""; }
.dpet-cor-mint .dpet-fome-rotulo::before { content: "❦ " / ""; }
.dpet-cor-manteiga .dpet-fome-rotulo::before { content: "⚡ " / ""; }
.dpet-cor-lilas .dpet-fome-rotulo::before { content: "✦ " / ""; }
.dpet-cor-coral .dpet-fome-rotulo::before { content: "● " / ""; }

/* ---- As bolinhas de escolher cor (adoção + Lojinha) -----------------------
   TODO seletor daqui é escopado em .dpet-cores (2+ classes) de propósito:
   dentro da Lojinha as bolinhas moram num <li> da .dpet-loja-lista, e a regra
   generica `.dpet-loja-lista button` (classe+elemento) VENCIA a cor delas —
   na prod a fileira saiu cinza-lilás e oval (o min-height:34px da lista).
   Mesma família da armadilha `.dq-item rect` vs `.dq-px-ambar` do quintal. */
.dpet-cores { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 2px 0; }
.dpet-cores-rotulo { margin: 0; font-size: 12px; color: var(--muted, #777); }
.dpet-cores .dpet-cor-bola {
    width: 26px; height: 26px;
    min-height: 26px;               /* a lista impõe 34px; sem isso vira oval */
    flex: 0 0 26px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    border: 2px solid color-mix(in srgb, var(--text, #111) 18%, transparent);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14); /* barriguinha 3D da bolinha */
}
.dpet-cores .dpet-cor-bola:hover { transform: translateY(-1px); }
.dpet-cores .dpet-cor-bola:active { transform: translateY(0); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.dpet-cores .dpet-cor-bola.dpet-cor-sel { outline: 2px solid var(--text, #111); outline-offset: 2px; }
.dpet-cores .dpet-cor-bola--rosa { background: var(--dpetf-rosa); }
.dpet-cores .dpet-cor-bola--ceu { background: var(--dpetf-ceu); }
.dpet-cores .dpet-cor-bola--mint { background: var(--dpetf-mint); }
.dpet-cores .dpet-cor-bola--manteiga { background: var(--dpetf-manteiga); }
.dpet-cores .dpet-cor-bola--lilas { background: var(--dpetf-lilas); }
.dpet-cores .dpet-cor-bola--coral { background: var(--dpetf-coral); }
.dpet-loja-lista li.dpet-cores-li { justify-content: center; }

/* ---- Botões de ação: pastilhas CALMAS (2026-08-06).
   Antes cada ação tinha o seu doce (mint · âmbar · rosa · lilás · céu): cinco
   cores fortes empilhadas logo abaixo do palco, competindo com o Bit e com a
   barra de fome. Agora todas nascem da MESMA pastilha neutra — a cor fica por
   conta do emoji (que já identifica a ação) e do toque. O único acento é a
   cor do PRÓPRIO Bit (--dpetf-c1), e só quando o dedo/mouse chega.
   Quem procura o botão certo lê o emoji, não a cor de fundo. */
.dpet-acoes { gap: 8px; }
.dpet-acoes button {
    border-radius: 14px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--text, #111) 16%, transparent);
    background: color-mix(in srgb, var(--text, #111) 6%, var(--surface, #fff));
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.dpet-acoes button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dpetf-c1) 12%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--dpetf-c1) 40%, var(--border, #ccc));
}
.dpet-acoes button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.dpet-acoes button:disabled {
    transform: none;
    box-shadow: none;
    opacity: .5;
}

/* ---- "Como o Bit cresce?": cartão céu com tracejado doce */
.dpet-como {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--dpetf-ceu) 32%, var(--border, #ccc));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.dpet-como li { border-bottom-color: color-mix(in srgb, var(--dpetf-c1) 35%, var(--border, #ccc)); }
.dpet-como li b { font-family: 'Lexend Deca', system-ui, sans-serif; }
.dpet-como-revisao,
.dpet-tesouro { border-radius: 12px; }

/* ---- Revisão esperta: cartão macio, errei/acertei com cara de errei/acertei */
.dpet-rev-topo strong { font-family: 'Lexend Deca', system-ui, sans-serif; }
.dpet-rev-topo span { font-family: 'Lexend Deca', system-ui, sans-serif; }
.dpet-rev-card {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--dpetf-ceu) 35%, var(--border, #ccc));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
.dpet-rev-resposta { border-top-color: color-mix(in srgb, var(--dpetf-ceu) 40%, var(--border, #ccc)); }
.dpet-rev-botoes button { border-radius: 16px; }
.dpet-rev-botoes button:active { transform: translate(0, 3px); }
#dpetRevErrei {
    background: color-mix(in srgb, var(--dpetf-coral) 13%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--dpetf-coral) 45%, var(--border, #ccc));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--dpetf-coral) 32%, var(--border, #ccc));
}
#dpetRevAcertei {
    background: color-mix(in srgb, var(--dpetf-verde) 13%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--dpetf-verde) 45%, var(--border, #ccc));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--dpetf-verde) 32%, var(--border, #ccc));
}
#dpetRevErrei:active, #dpetRevAcertei:active { box-shadow: none; }

/* ---- Lojinha: abas viram seletor de pílulas, prateleira vira cartõezinhos */
.dpet-loja-abas { gap: 6px; }
.dpet-loja-abas button {
    border-radius: 99px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    letter-spacing: .01em;
    background: color-mix(in srgb, var(--dpetf-lilas) 6%, var(--bg-2, #f2f2f2));
    border-color: color-mix(in srgb, var(--dpetf-lilas) 30%, var(--border, #ccc));
}
.dpet-loja-abas button.dpet-aba-on {
    background: color-mix(in srgb, var(--dpetf-lilas) 20%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--dpetf-lilas) 62%, var(--border, #ccc));
    color: var(--text, #111);
}
.dpet-loja-lista li {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--dpetf-lilas) 26%, var(--border, #ccc));
    box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
}
.dpet-loja-lista li.dpet-loja-secao {
    box-shadow: none;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    letter-spacing: .12em;
}
/* Equipado: a moldura âmbar fica, mas vira anel de brilho macio */
.dpet-loja-lista li.dpet-item-on {
    border-color: #ffc107;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ffc107 30%, transparent);
}
.dpet-loja-lista button {
    border-radius: 99px;
    border-color: color-mix(in srgb, var(--dpetf-lilas) 40%, var(--border, #ccc));
    background: color-mix(in srgb, var(--dpetf-lilas) 10%, var(--surface, #fff));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--dpetf-lilas) 30%, var(--border, #ccc));
    font-family: 'Lexend Deca', system-ui, sans-serif;
}
.dpet-loja-lista button:active { transform: translate(0, 2px); box-shadow: none; }
.dpet-loja-lista button:disabled {
    transform: none;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--dpetf-lilas) 30%, var(--border, #ccc));
}
/* Selo de oferta: pílula que balança suave */
.dpet-selo { border-radius: 99px; font-family: 'Lexend Deca', system-ui, sans-serif; animation: dpet-selo-pulsa 1.6s ease-in-out infinite; }

/* ---- Views (login / adoção): entrada e CTA redondinhos */
.dpet-view input {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--dpetf-c1) 40%, var(--border, #ccc));
}
.dpet-view input:focus {
    outline: 2px solid var(--dpetf-forte);
    outline-offset: 1px;
}
.dpet-cta {
    border-radius: 99px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #0d9488) 40%, transparent);
}
.dpet-cta:active { transform: translate(0, 2px); box-shadow: none; }

/* ---- "← voltar": mesmo truque sticky, só a pele muda (o fundo dele precisa
   casar com o FIM do gradiente da moldura, senão aparece a emenda) */
.dpet-fechar {
    background: color-mix(in srgb, var(--dpetf-c2) 7%, var(--bg, #fafafa));
    border-top: 2px dashed color-mix(in srgb, var(--dpetf-c1) 32%, var(--border, #ccc));
}

/* ---- Partículas: o "+10🔩" sobe flutuando em vez de pular frames */
.dpet-part {
    font-family: 'Lexend Deca', system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    animation: dpet-sobe 1s ease-out forwards;
}
/* Confete em tons de doce (mesmos 8 pontos, cores trocadas) */
.dpet-confete:not([hidden])::before {
    box-shadow:
        -28px -18px 0 #ffd166, 22px -24px 0 #9ad0ff, -14px -30px 0 #8ce8c3, 30px -8px 0 #ff9ec7,
        -32px 6px 0 #b79cff, 26px 14px 0 #ffd166, -8px 20px 0 #ff9ec7, 12px 24px 0 #8ce8c3;
}

/* ---- Salinha de jogos: a pele candy da arena ------------------------------ */
.dpet-jogos-grid { gap: 7px; }
.dpet-jogos-grid button {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--dpetf-c1) 34%, var(--border, #ccc));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--dpetf-c1) 24%, var(--border, #ccc));
}
.dpet-jogos-grid button:active { transform: translate(0, 3px); box-shadow: none; }
.dpet-jogos-grid button:disabled {
    transform: none;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--dpetf-c1) 24%, var(--border, #ccc));
}
.dpet-jogo-area {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--dpetf-ceu) 35%, var(--border, #ccc));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
.dpet-ppt-maos button {
    border-radius: 50%;
    background: color-mix(in srgb, var(--dpetf-ceu) 12%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--dpetf-ceu) 42%, var(--border, #ccc));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--dpetf-ceu) 30%, var(--border, #ccc));
}
.dpet-ppt-maos button:active { transform: translate(0, 3px); box-shadow: none; }
.dpet-mem-carta {
    border-radius: 12px;
    background: color-mix(in srgb, var(--dpetf-c1) 8%, var(--bg-2, #f2f2f2));
    border-color: color-mix(in srgb, var(--dpetf-c1) 30%, var(--border, #ccc));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--dpetf-c1) 22%, var(--border, #ccc));
}
.dpet-mem-carta.dpet-mem-aberta { background: var(--surface, #fff); }
.dpet-mem-carta.dpet-mem-par {
    border-color: #ffc107;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ffc107 30%, transparent);
}
.dpet-jogo-area canvas { border-radius: 12px; }

/* ---- Acessibilidade: o que esta folha (re)animou também para aqui.
   Precisa existir AQUI porque esta folha carrega DEPOIS da base — sem este
   bloco, as re-declarações acima venceriam o reduced-motion de lá. */
@media (prefers-reduced-motion: reduce) {
    .dpet-festa,
    .dpet-panel:not([hidden]),
    .dpet-part,
    .dpet-selo,
    .dq-e-3 .dq-canteiro { animation: none !important; }
    .dpet-fome i,
    .dpet-fome i::before,
    .dpet-fome i::after,
    .dpet-acoes button { transition: none; }
    .dpet-cor-bola:hover { transform: none; }
    .dpet-acoes button:active:not(:disabled) { transform: none; }
}