/* ============================================================================
   Pet Virtual "Bit" — o filhote pixel da Dóri
   ----------------------------------------------------------------------------
   Prefixo .dpet-* em TODA classe (regra da casa: o widget divide DOM com o
   site inteiro). Cores pelos tokens do tema = claro/escuro automático; os
   únicos hardcodes são o verde do gramado (o MESMO do ícone da Dóri) e os
   acentos âmbar/fogo do sprite. Retro = steps() em tudo que anima; tudo
   morre em prefers-reduced-motion.
   ========================================================================== */

/* ---- Header: o ícone da Dóri (o pet) vira botão clicável que abre o painel.
   A cara do botão vem inteira do .dori-widget-header-icon (dori-widget.css) —
   aqui só o reset de <button> e os affordances de clique. */
.dpet-trigger {
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dpet-trigger:hover { filter: brightness(1.08); }
.dpet-trigger:focus-visible { outline: 2px solid var(--focus, #fff); outline-offset: 2px; }

/* Concluiu uma aula: o ícone (que É o pet) pula na barra lateral. O aluno
   ganhou Parafusos — ele precisa VER isso acontecer, mesmo com o painel fechado. */
.dpet-festa { animation: dpet-festa .9s steps(3) 2; }
@keyframes dpet-festa {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-5px) scale(1.08); }
    70% { transform: translateY(0) scale(.97); }
}

/* Badge pixel ("!" quando fome baixa / novidade esperando) */
.dpet-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 15px; height: 15px;
    background: #ffc107; color: #1a1a1a;
    font: 700 10px/15px ui-monospace, monospace;
    text-align: center;
    border-radius: 3px;
    box-shadow: 1px 1px 0 rgba(0,0,0,.35);
    z-index: 3;
}

/* ---- Sprite pixel (compartilhado: quintal 36px, palco 72px) */
.dpet-sprite { display: block; width: 100%; height: 100%; }
.dpet-sprite rect { fill: #10151a; }
.dpet-sprite .dpet-px-ambar { fill: #ffc107; }
.dpet-sprite .dpet-px-fogo { fill: #ff9800; }
/* Verde-lima dos itens de colheita: mais claro que a grama #4d9a45 de
   proposito — verde igual ao do palco sumiria em cima dela */
.dpet-sprite .dpet-px-verde { fill: #8bc34a; }
.dpet-sprite .dpet-chapeu,
.dpet-sprite .dpet-olhos-fechados,
.dpet-sprite .dpet-sparks,
.dpet-sprite .dpet-chamas,
.dpet-sprite .dpet-antena-murcha,
.dpet-sprite .dpet-antena-dupla,
.dpet-sprite .dpet-laco,
.dpet-sprite .dpet-foguete-capacete,
.dpet-sprite .dpet-emblema,
.dpet-sprite .dpet-olhos-caret,
.dpet-sprite .dpet-olhos-coracao,
.dpet-sprite .dpet-olhos-pequenos,
.dpet-sprite .dpet-oculos,
.dpet-sprite .dpet-boca,
.dpet-sprite .dpet-boca-aberta,
.dpet-sprite .dpet-sorriso,
.dpet-sprite .dpet-boca-triste,
.dpet-sprite .dpet-comida,
.dpet-sprite .dpet-zzz,
.dpet-sprite .dpet-set-f { display: none; }
.dpet-sprite g { transform-box: fill-box; transform-origin: center; }

/* Estados (classe .dpet-e-* aplicada no WRAPPER: #dpetWalker / #dpetStageSprite) */
.dpet-has-chapeu .dpet-chapeu { display: block; }
.dpet-has-chapeu .dpet-antena { display: none; }
.dpet-blink .dpet-olhos-abertos,
.dpet-e-soneca .dpet-olhos-abertos,
.dpet-e-saudade .dpet-olhos-abertos { display: none; }
.dpet-blink .dpet-olhos-fechados,
.dpet-e-soneca .dpet-olhos-fechados,
.dpet-e-saudade .dpet-olhos-fechados { display: block; }
.dpet-e-radiante .dpet-sparks { display: block; }
.dpet-e-radiante .dpet-sparks rect { animation: dpet-pisca-spark .6s steps(1) infinite; }
.dpet-e-muita_fome .dpet-arm-esq,
.dpet-e-muita_fome .dpet-arm-dir { transform: translateY(1.5px); }
.dpet-e-muita_fome .dpet-olhos-abertos { opacity: .6; }

/* ---- Nivel do pet (classe .dpet-nv-N no wrapper): filhote e Super Bit */
.dpet-nv-1 .dpet-set-n { display: none; }
.dpet-nv-1 .dpet-set-f { display: block; }
.dpet-nv-1.dpet-stage-sprite { width: 54px; height: 54px; }
.dpet-nv-3 .dpet-antena { display: none; }
.dpet-nv-3 .dpet-antena-dupla,
.dpet-nv-3 .dpet-emblema,
.dpet-nv-3 .dpet-sparks { display: block; }
.dpet-nv-3 .dpet-sparks rect { animation: dpet-pisca-spark 1.4s steps(1) infinite; }

/* ---- Fome com cara de fome (DEPOIS do nivel: a antena murcha vence a dupla).
   Olhos so no set normal — o filhote guarda os olhos proprios dele. */
.dpet-e-fominha .dpet-antena,
.dpet-e-fominha .dpet-antena-dupla,
.dpet-e-muita_fome .dpet-antena,
.dpet-e-muita_fome .dpet-antena-dupla { display: none; }
.dpet-e-fominha .dpet-antena-murcha,
.dpet-e-muita_fome .dpet-antena-murcha { display: block; }
.dpet-e-fominha .dpet-set-n .dpet-olhos-abertos,
.dpet-e-muita_fome .dpet-set-n .dpet-olhos-abertos { display: none; }
.dpet-e-fominha .dpet-olhos-pequenos,
.dpet-e-muita_fome .dpet-olhos-pequenos,
.dpet-e-fominha .dpet-boca-triste,
.dpet-e-muita_fome .dpet-boca-triste { display: block; }
.dpet-e-muita_fome .dpet-olhos-pequenos { opacity: .6; }

/* ---- Soneca/saudade: ZZ pixel flutuando */
.dpet-e-soneca .dpet-zzz,
.dpet-e-saudade .dpet-zzz { display: block; }
.dpet-zzz-a { animation: dpet-zzz-flutua 2.6s linear infinite; }
.dpet-zzz-b { animation: dpet-zzz-flutua 2.6s linear 1.3s infinite; }
@keyframes dpet-zzz-flutua {
    0% { opacity: 0; transform: translateY(1.5px); }
    20% { opacity: 1; }
    70% { opacity: 1; transform: translateY(-1px); }
    100% { opacity: 0; transform: translateY(-1.5px); }
}

/* ---- Cosmeticos equipados (por ULTIMO: chapeu/capacete escondem qualquer antena) */
.dpet-cos-oculos .dpet-oculos { display: block; }
.dpet-cos-laco .dpet-laco { display: block; }
.dpet-cos-foguete .dpet-foguete-capacete { display: block; }
.dpet-has-chapeu .dpet-antena-dupla,
.dpet-has-chapeu .dpet-antena-murcha,
.dpet-cos-foguete .dpet-antena,
.dpet-cos-foguete .dpet-antena-dupla,
.dpet-cos-foguete .dpet-antena-murcha { display: none; }

/* Flutuação idle IGUAL à do ícone original da Dóri (doriFloat: 3s ease-in-out,
   sobe suave + inclina ±1.5deg) — pedido do Dago: "a movimentação igual, por
   padrão". Vive no WRAPPER pra não brigar com os one-shots do .dpet-rig. */
.dpet-stage-sprite { animation: dpet-flutua 3s ease-in-out infinite; }
.dpet-e-radiante.dpet-stage-sprite { animation-duration: 2s; }
.dpet-e-fominha.dpet-stage-sprite { animation-duration: 4.5s; }
.dpet-e-muita_fome.dpet-stage-sprite,
.dpet-e-soneca.dpet-stage-sprite,
.dpet-e-saudade.dpet-stage-sprite { animation: none; }

@keyframes dpet-flutua {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1.5px) rotate(1.5deg); }
    50% { transform: translateY(-3px) rotate(0deg); }
    75% { transform: translateY(-1.5px) rotate(-1.5deg); }
}
@keyframes dpet-pisca-spark { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- Animações one-shot (JS põe a classe e tira no animationend) */
.dpet-anim-pula .dpet-rig { animation: dpet-pula .6s steps(4); }
.dpet-anim-aceno .dpet-arm-dir { transform-origin: left center; animation: dpet-aceno .9s steps(3); }
.dpet-anim-atchim .dpet-rig { animation: dpet-atchim .6s steps(4); }
.dpet-anim-come .dpet-rig { animation: dpet-mastiga 1.2s steps(6); }
.dpet-anim-foguete .dpet-rig { animation: dpet-foguete 1.6s steps(8); }
.dpet-anim-foguete .dpet-chamas { display: block; }
.dpet-anim-foguete .dpet-chama-a { animation: dpet-pisca-spark .3s steps(1) infinite; }
.dpet-anim-foguete .dpet-chama-b { animation: dpet-pisca-spark .3s steps(1) .15s infinite; }

/* Carinha feliz de verdade durante pulo/sacudida: olhos ^ ^ + sorriso */
.dpet-anim-pula .dpet-set-n .dpet-olhos-abertos,
.dpet-anim-serelepe .dpet-set-n .dpet-olhos-abertos,
.dpet-anim-pula .dpet-olhos-fechados,
.dpet-anim-serelepe .dpet-olhos-fechados,
.dpet-anim-pula .dpet-olhos-pequenos,
.dpet-anim-serelepe .dpet-olhos-pequenos,
.dpet-anim-pula .dpet-boca-triste,
.dpet-anim-serelepe .dpet-boca-triste { display: none; }
.dpet-anim-pula .dpet-olhos-caret,
.dpet-anim-serelepe .dpet-olhos-caret,
.dpet-anim-pula .dpet-sorriso,
.dpet-anim-serelepe .dpet-sorriso { display: block; }

/* Comer de verdade: a boca mastiga (frames) e a bateria some em 3 mordidas */
.dpet-anim-come .dpet-boca,
.dpet-anim-come .dpet-comida { display: block; }
.dpet-anim-come .dpet-boca-aberta { display: block; opacity: 0; animation: dpet-boca-mastiga 1.2s steps(1, end) forwards; }
.dpet-anim-come .dpet-comida-a { animation: dpet-comida-a 1.2s steps(1, end) forwards; }
.dpet-anim-come .dpet-comida-b { opacity: 0; animation: dpet-comida-b 1.2s steps(1, end) forwards; }
.dpet-anim-come .dpet-comida-c { opacity: 0; animation: dpet-comida-c 1.2s steps(1, end) forwards; }
@keyframes dpet-boca-mastiga {
    0%, 12% { opacity: 0; }
    13%, 28% { opacity: 1; }
    29%, 45% { opacity: 0; }
    46%, 61% { opacity: 1; }
    62%, 78% { opacity: 0; }
    79%, 94% { opacity: 1; }
    95%, 100% { opacity: 0; }
}
@keyframes dpet-comida-a { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes dpet-comida-b { 0%, 39% { opacity: 0; } 40%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes dpet-comida-c { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* Apaixonado (Pilha Turbo / combo de carinho): olhos de coracao pulsando.
   Ele "tira os oculos" pra se apaixonar (os pixels brigariam). */
.dpet-anim-amor .dpet-set-n .dpet-olhos-abertos,
.dpet-anim-amor .dpet-olhos-fechados,
.dpet-anim-amor .dpet-olhos-pequenos,
.dpet-anim-amor .dpet-boca-triste,
.dpet-anim-amor .dpet-oculos { display: none; }
.dpet-anim-amor .dpet-olhos-coracao { display: block; animation: dpet-coracao-pulsa .7s steps(2) infinite; }
.dpet-anim-amor .dpet-sorriso { display: block; }
@keyframes dpet-coracao-pulsa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@keyframes dpet-pula {
    0% { transform: translateY(0); }
    35% { transform: translateY(-5px); }
    70% { transform: translateY(.5px) scale(1.06, .94); }
    100% { transform: translateY(0); }
}
@keyframes dpet-aceno {
    0%, 100% { transform: rotate(0); }
    40% { transform: rotate(-38deg); }
    70% { transform: rotate(-12deg); }
}
@keyframes dpet-atchim {
    0%, 100% { transform: rotate(0) translateX(0); }
    30% { transform: rotate(-6deg) translateX(-1px); }
    60% { transform: rotate(7deg) translateX(1.5px); }
}
@keyframes dpet-mastiga {
    0%, 100% { transform: translateY(0); }
    15%, 45%, 75% { transform: translateY(1.5px) scale(1.06, .92) rotate(-2deg); }
    30%, 60%, 90% { transform: translateY(0) scale(.98, 1.03) rotate(2deg); }
}

/* Sacudidinha de alegria (carinho/brincar) */
.dpet-anim-serelepe .dpet-rig { animation: dpet-serelepe .5s steps(4); }
@keyframes dpet-serelepe {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg) translateX(-.5px); }
    50% { transform: rotate(7deg) translateX(.5px); }
    75% { transform: rotate(-4deg); }
}

/* Partícula flutuante (❤, +10 🔩) — criada pelo JS, sobe e some */
.dpet-part {
    position: absolute;
    left: 50%; top: 30%;
    font: 700 13px/1 ui-monospace, monospace;
    color: var(--text, #111);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
    z-index: 6;
    pointer-events: none;
    animation: dpet-sobe 1s steps(6) forwards;
}
@keyframes dpet-sobe {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -26px); opacity: 0; }
}
@keyframes dpet-foguete {
    0% { transform: translateY(0); }
    25% { transform: translateY(-9px); }
    55% { transform: translateY(-9px) rotate(4deg); }
    75% { transform: translateY(1.5px) scale(1.08, .92) rotate(0); }
    100% { transform: translateY(0); }
}

/* ---- Balão 8-bit (borda dura + sombra de 2px, sem raio) */
.dpet-bubble {
    position: absolute;
    background: var(--surface, #fff);
    color: var(--text, #111);
    border: 2px solid var(--text, #111);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    z-index: 6;
    pointer-events: none;
}
/* Ancorado pela ESQUERDA do ícone, não centralizado: o ícone fica a ~40px da
   borda da tela e um balão centralizado com texto longo ("123🔩 te esperando!")
   vazava metade pra fora. Cresce pra dentro do widget, que é largo. */
.dpet-bubble-header { top: -8px; left: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dpet-bubble-stage { top: 6px; left: 50%; transform: translateX(-50%); max-width: 92%; white-space: normal; text-align: center; }

/* ---- Painel do pet: overlay DENTRO do #doriWidget, abaixo do header */
.dpet-panel {
    position: absolute;
    top: var(--menu-groups-width, 112px);
    left: 0; right: 0; bottom: 0;
    background: var(--surface, #fff);
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden; /* quem rola e o .dpet-frame — assim o "voltar" gruda no fundo */
}
.dpet-panel[hidden] { display: none !important; }
/* Views/HUD/ações têm display próprio (flex/grid) — sem o guard, o atributo
   hidden perde a briga de especificidade e tudo aparece junto */
.dpet-acoes[hidden],
.dpet-view[hidden],
.dpet-hud[hidden],
.dpet-bubble[hidden],
.dpet-fechar[hidden],
.dpet-nivel[hidden],
.dpet-streak[hidden],
.dpet-fase-fio[hidden],
.dpet-badge[hidden] { display: none !important; }
.dpet-panel:not([hidden]) { animation: dpet-entra .25s steps(4); }
@keyframes dpet-entra { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Moldura "janela de Game Boy": borda dura + cantos serrilhados */
.dpet-frame {
    flex: 1;
    min-height: 0;      /* sem isso o filho alto estoura o flex e some o rodapé */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 2px solid var(--border, #ccc);
    background: var(--bg, #fafafa);
    padding: 12px;
    clip-path: polygon(
        0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0,
        calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
        6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)
    );
}

/* Palco: gramado grande onde o pet mora (clique = carinho).
   O palco RESPIRA (2026-08-06): nasce nos 96px e cresce SÓ com a sobra de
   altura do .dpet-frame — em tela alta o gramado fica generoso; onde não
   sobra nada (375px, o caso que fez a armadilha antiga morder: 116px fixos =
   17px de rolagem) ele fica exatamente nos 96px de sempre. Teto pra não virar
   campo de futebol com um robô de 62px perdido no meio. */
.dpet-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 96px;
    max-height: 168px;
    border: 2px solid var(--border, #ccc);
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0,0,0,.04) 7px, rgba(0,0,0,.04) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0,0,0,.04) 7px, rgba(0,0,0,.04) 9px),
        #4d9a45;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
}
.dpet-stage:focus-visible { outline: 2px solid var(--focus, #2196f3); outline-offset: 2px; }
/* O Bit fica a 20% DA ALTURA DO PALCO do chão — proporcional, não fixo: num
   palco de 96px dá 19px (o de sempre) e num de 168px dá 34px, então ele sobe
   junto quando o gramado cresce em vez de ficar encostado na borda de baixo.
   Ancorado por `bottom` (e não centralizado) porque o quintal inteiro mora no
   chão: casinha, cerca, banquinho e canteiro são todos `bottom`.
   ⚠️ Centrado por `margin-inline: auto` entre left/right 0, NUNCA por
   `transform: translateX(-50%)`: o `dpet-flutua` (e as animações one-shot)
   escrevem transform no mesmo elemento e apagariam a centralização. */
.dpet-stage-sprite {
    position: absolute;
    left: 0; right: 0;
    margin-inline: auto;
    bottom: 20%;
    width: 62px; height: 62px; display: block;
}

/* Confete pixel (8 quadradinhos num box-shadow só) */
.dpet-confete {
    position: absolute;
    left: 50%; top: 40%;
    width: 5px; height: 5px;
    background: transparent;
    z-index: 5;
    pointer-events: none;
}
.dpet-confete:not([hidden])::before {
    content: "";
    position: absolute;
    width: 5px; height: 5px;
    background: transparent;
    box-shadow:
        -28px -18px 0 #ffc107, 22px -24px 0 #2196f3, -14px -30px 0 #00bfa5, 30px -8px 0 #ff9800,
        -32px 6px 0 #2196f3, 26px 14px 0 #ffc107, -8px 20px 0 #ff9800, 12px 24px 0 #00bfa5;
    animation: dpet-confete-solta .8s steps(6) forwards;
}
@keyframes dpet-confete-solta {
    0% { transform: scale(.2); opacity: 1; }
    70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.25) translateY(8px); opacity: 0; }
}

/* HUD: nome + saldo + barra de fome retrô */
.dpet-nome-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text, #111);
}
.dpet-nome-linha strong { font-size: 15px; overflow-wrap: anywhere; }
.dpet-nome-direita { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dpet-som {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    opacity: .75;
}
.dpet-som:hover { opacity: 1; }
.dpet-saldo { font: 700 13px/1 ui-monospace, monospace; color: var(--text, #111); white-space: nowrap; }
/* Nivel (Nv 1 Filhote / Nv 2 Bit / Nv 3 Super Bit) + sequencia de dias 🔥 */
.dpet-nivel {
    font: 700 10px/1 ui-monospace, monospace;
    color: var(--primary, #0d9488);
    border: 1px solid var(--primary, #0d9488);
    padding: 2px 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dpet-streak { font: 700 12px/1 ui-monospace, monospace; color: var(--text, #111); white-space: nowrap; }
/* Fio da FASE: 2px, âmbar do sprite — a barra andando É a recompensa.
   A transition anima o replay (0 -> fase atual) na abertura do painel */
.dpet-fase-fio {
    height: 2px;
    margin-top: 2px;
    background: var(--bg-2, #eee);
    overflow: hidden;
}
.dpet-fase-fio i {
    display: block;
    height: 100%;
    width: 0;
    background: #ffc107;
    transition: width .7s ease;
}
.dpet-fome-linha { display: flex; align-items: center; gap: 8px; }
.dpet-fome-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #777); }
.dpet-fome { display: flex; gap: 2px; }
.dpet-fome i {
    width: 13px; height: 13px;
    border: 1px solid var(--border, #ccc);
    background: var(--bg-2, #eee);
    transition: background .2s steps(2);
}
.dpet-fome i.dpet-cheia { background: var(--primary, #0d9488); border-color: var(--primary, #0d9488); }

/* Botões de ação: aperto retrô (sombra dura que "afunda") */
.dpet-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}
.dpet-acoes button {
    min-height: 44px;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #111);
    font: 600 12.5px/1.2 inherit;
    font-family: inherit;
    padding: 6px 4px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border, #ccc);
}
.dpet-acoes button em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted, #777); margin-top: 1px; }
.dpet-acoes button:active { transform: translate(2px, 2px); box-shadow: none; }
.dpet-acoes button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--border, #ccc); }

/* Mensagem viva (aria-live) + views de login/adoção */
.dpet-msg { min-height: 0; font-size: 12px; text-align: center; color: var(--muted, #777); }
.dpet-msg:empty { display: none; }

/* "Como o Bit cresce?" — explicação do loop + a revisão espaçada */
.dpet-como {
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    padding: 10px;
    color: var(--text, #111);
    box-shadow: 2px 2px 0 var(--border, #ccc);
    flex-shrink: 0;
}
.dpet-como[hidden] { display: none !important; }
.dpet-como h5 {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dpet-como p { margin: 0; font-size: 12px; line-height: 1.45; }
.dpet-como ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dpet-como li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px dashed var(--border, #ccc);
    padding-bottom: 3px;
}
.dpet-como li b { font-family: ui-monospace, monospace; white-space: nowrap; }
.dpet-como-revisao {
    margin: 0;
    padding: 7px 8px;
    font-size: 11.5px;
    line-height: 1.4;
    background: color-mix(in srgb, #ffc107 12%, transparent);
    border: 1px solid color-mix(in srgb, #ffc107 35%, transparent);
}
/* Resgate na tela de adoção: quem já estudou não começa do zero.
   Mesmo âmbar do bloco da revisão — é destaque, não alarme. */
.dpet-tesouro {
    margin: 0;
    padding: 7px 8px;
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 700;
    background: color-mix(in srgb, #ffc107 14%, transparent);
    border: 1px solid color-mix(in srgb, #ffc107 40%, transparent);
    color: var(--text, #111);
}
.dpet-tesouro[hidden] { display: none !important; }

/* ---- Revisão esperta (SM-2): pergunta → resposta → errei/acertei */
.dpet-btn-revisao { grid-column: 1 / -1; }
/* Missao do dia (F4): linha discreta sob as acoes; some sem card (guard [hidden] la em cima) */
.dpet-missao { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--muted, #6b7280); text-align: center; }
.dpet-missao[hidden] { display: none !important; }
.dpet-revisao { text-align: left; }
.dpet-rev-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dpet-rev-topo strong { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.dpet-rev-topo span { font: 700 12px/1 ui-monospace, monospace; color: var(--muted, #777); }
.dpet-rev-curso { margin: 0; font-size: 11px; color: var(--muted, #777); min-height: 13px; }
.dpet-rev-card {
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    box-shadow: 2px 2px 0 var(--border, #ccc);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dpet-rev-pergunta { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.dpet-rev-resposta {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    border-top: 1px dashed var(--border, #ccc);
    padding-top: 8px;
    overflow-wrap: anywhere;
}
.dpet-rev-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dpet-rev-botoes button {
    min-height: 48px;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #111);
    font: 600 13px/1.25 inherit;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border, #ccc);
}
.dpet-rev-botoes button:active { transform: translate(2px, 2px); box-shadow: none; }
.dpet-rev-fim { margin: 0; font-size: 13px; text-align: center; line-height: 1.5; }
/* O Bit indica os GIBIS como revisao (fim da fila): links-pilula pro player de
   cenas, no mesmo traço "borda + sombra dura" dos cards. Guard [hidden] no bloco
   dos guards la embaixo (a armadilha do display de classe, pet.md §11). */
.dpet-rev-gibis { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dpet-rev-gibis-titulo { margin: 0; font-size: 11.5px; text-align: center; color: var(--muted, #777); }
.dpet-rev-gibi {
    display: block;
    text-align: center;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    box-shadow: 2px 2px 0 var(--border, #ccc);
    color: var(--text, #111);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    padding: 8px 10px;
    overflow-wrap: anywhere;
}
.dpet-rev-gibi:active { transform: translate(2px, 2px); box-shadow: none; }
.dpet-rev-gibi-selo { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted, #777); margin-top: 2px; }
.dpet-rev-gibis[hidden] { display: none !important; }

/* ---- Lojinha: cosmeticos numa view propria (a grade de acoes nao cresce) */
.dpet-loja { text-align: left; }
/* Abas da Lojinha: "No Bit" (cosméticos) x "Quintal" (enfeites) */
.dpet-loja-abas { display: flex; gap: 4px; }
.dpet-loja-abas button {
    flex: 1;
    border: 2px solid var(--border, #ccc);
    background: var(--bg-2, #f2f2f2);
    color: var(--muted, #777);
    font: 700 11px/1 ui-monospace, monospace;
    padding: 7px 4px;
    cursor: pointer;
}
.dpet-loja-abas button.dpet-aba-on {
    background: var(--surface, #fff);
    color: var(--text, #111);
    border-color: var(--text, #111);
}
.dpet-loja-lista[hidden] { display: none !important; }
.dpet-loja-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dpet-loja-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    box-shadow: 2px 2px 0 var(--border, #ccc);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text, #111);
}
.dpet-loja-lista li em { font-style: normal; font-size: 10.5px; color: var(--muted, #777); display: block; }
/* Com o ícone do enfeite o <li> tem 3 filhos: sem o flex:1 o texto fica
   centralizado entre o ícone e o preço, e a lista perde o alinhamento */
.dpet-loja-quintal li > span { flex: 1; text-align: left; }
.dpet-loja-lista button {
    min-height: 34px;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #111);
    font: 700 12px/1 ui-monospace, monospace;
    padding: 0 10px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border, #ccc);
    white-space: nowrap;
    flex-shrink: 0;
}
.dpet-loja-lista button:active { transform: translate(2px, 2px); box-shadow: none; }
.dpet-loja-lista button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--border, #ccc); }
.dpet-loja-dica { margin: 0; font-size: 11px; text-align: center; color: var(--muted, #777); }
/* Guard do hidden (mesma briga de especificidade das views).
   O selo da oferta entra na lista: o display:inline-block dele vencia o
   atributo hidden e todo item da vitrine ganhava um tracinho laranja. */
.dpet-rev-resposta[hidden],
.dpet-rev-botoes[hidden],
.dpet-rev-fim[hidden],
.dpet-rev-card[hidden],
.dpet-selo[hidden],
.dpet-cta[hidden] { display: none !important; }

/* flex:1 = a view ocupa o resto do quadro, então o "← voltar" dela (margin-top
   auto) desce pro rodapé em vez de flutuar no meio */
.dpet-view { flex: 1; text-align: center; color: var(--text, #111); display: flex; flex-direction: column; gap: 10px; }
.dpet-view p { margin: 0; font-size: 14px; }
.dpet-view input {
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #111);
    padding: 10px;
    font: inherit;
    text-align: center;
}
.dpet-cta {
    display: inline-block;
    min-height: 44px;
    border: 0;
    background: var(--primary, #0d9488);
    color: var(--primary-contrast, #fff);
    font: 700 14px/44px inherit;
    font-family: inherit;
    padding: 0 18px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}
.dpet-cta:active { transform: translate(2px, 2px); box-shadow: none; }

/* "← voltar" GRUDA no fundo do quadro (sticky): por mais que o conteúdo cresça
   — pet + ações + explicação + revisão —, a saída está sempre à vista. */
.dpet-fechar {
    position: sticky;
    bottom: -12px;                  /* cobre o padding-bottom do .dpet-frame */
    z-index: 2;
    margin: auto -12px -12px;       /* sangra até as bordas do quadro */
    padding: 8px 0 10px;
    min-height: 40px;
    background: var(--bg, #fafafa);
    border: none;
    border-top: 1px solid var(--border, #ccc);
    color: var(--muted, #777);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.dpet-fechar:hover { color: var(--text, #111); }

/* ============================================================================
   Rodapé do chat da Dóri em UMA linha: [⚡][pergunta][➤] (pedido do Dago)
   O dori-widget.css é MINIFICADO (fonte da verdade intocável) — os overrides
   moram aqui. O markup moveu .dori-widget-quick pra DENTRO de
   .dori-widget-input; o menu continua abrindo pra cima (classe .open do JS).
   ========================================================================== */
#doriWidget .dori-widget-input { position: relative; }
#doriWidget .dori-widget-input .dori-widget-quick {
    position: static; /* âncora do dropdown passa a ser o próprio .dori-widget-input */
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
}
#doriWidget .dori-widget-input .dori-quick-menu {
    left: 16px;
    right: 16px;
    bottom: calc(100% + 8px);
    margin-bottom: 0;
    border: 1px solid var(--border, #ccc);
    border-radius: 12px;
}
#doriWidget .dori-widget-input .dori-quick-trigger {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    background: var(--bg-2, #eee);   /* neutro: a ação primária teal é o ➤ */
    color: var(--text-2, #555);
    border: 1px solid var(--border, #ccc);
}
#doriWidget .dori-widget-input .dori-quick-trigger:hover { background: var(--bg, #f5f5f5); }
#doriWidget .dori-widget-input .dori-quick-trigger.open {
    background: var(--primary, #0d9488);
    color: var(--primary-contrast, #fff);
    border-color: var(--primary, #0d9488);
}

/* Os itens do menu herdariam o estilo do botão redondo de enviar
   (.dori-widget-input button, minificado) — devolve o visual de LISTA */
#doriWidget .dori-widget-input .dori-quick-menu button {
    width: 100%;
    height: auto;
    flex-shrink: 1;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text, #111);
    font-size: 14px;
    text-align: left;
}
#doriWidget .dori-widget-input .dori-quick-menu button:hover {
    background: var(--primary-light, rgba(13, 148, 136, .1));
    color: var(--primary, #0d9488);
}

/* ============================================================================
   O QUINTAL DO BIT (Nv 2 em diante)
   ----------------------------------------------------------------------------
   Prefixo .dq-* (o quintal vive DENTRO do .dpet-stage). Mesma paleta do sprite:
   tinta #10151a, âmbar #ffc107, fogo #ff9800 — zero cor nova.

   Contrato com o JS: ele liga .dq-on-<item> no #dpetQuintal a partir da lista
   que o servidor manda (PetQuintalService::CENARIO). Item novo = um <span> no
   partial + UMA regra .dq-<item> aqui dizendo onde ele fica. O JS não muda.
   ========================================================================== */
.dpet-quintal {
    position: absolute;
    inset: 0;
    z-index: 1;              /* atrás do sprite (z 3) e do balão */
    pointer-events: none;    /* só o canteiro é clicável */
}
.dpet-quintal[hidden] { display: none !important; }
/* O palco NÃO cresce: segue nos 96px. Subir pra 116 dava 17px de rolagem em
   375px — e o painel foi compactado justamente pra caber sem rolar lá. O
   cenário mora nas bordas (casinha na esquerda, cerca no fundo, canteiro na
   direita), então o miolo continua livre pro Bit. */

.dq-item {
    position: absolute;
    display: none;           /* cada item só aparece com .dq-on-<item> */
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
}
.dq-item svg { width: 100%; height: 100%; display: block; }
/* PEGADINHA: `.dq-item rect` (classe+elemento) VENCE `.dq-px-ambar` (classe
   só) — sem o `.dq-item` na frente de cada acento o quintal inteiro sai preto.
   Foi exatamente o que aconteceu na 1a rodada: casinha sem janela acesa. */
.dq-item rect { fill: #10151a; }
.dq-item .dq-px-ambar,
.dq-item .dq-janela { fill: #ffc107; }
.dq-item .dq-px-fogo { fill: #ff9800; }
.dq-item .dq-px-terra { fill: #6b4b2a; }
.dq-item .dq-px-semente { fill: #8a6a44; }

/* Onde cada item mora no palco (uma linha por item).
   A profundidade e' so' o `bottom`: quanto MAIOR, mais "longe" o item parece.
   Cerca la' no fundo, canteiro na frente encostado no chao — sem eles um
   dentro do outro (a planta sumia no meio das estacas).
   A FAIXA CENTRAL (35–65%) fica vazia de proposito: ali mora o Bit. */
/* ⚠️ Caixa SEMPRE quadrada: o viewBox é 16x16 e o SVG preserva a proporção —
   numa caixa 16x34 o desenho encolhe pra caber na largura e sobra tarja.

   O quintal CHEIO são 7 peças num palco de ~290–340px com o Bit (62px) fixo
   no meio. Por isso tudo mora ancorado numa BORDA e em duas profundidades:
   o chão (bottom 0) e o fundo (bottom 32+). No pior caso (palco 290px) o Bit
   ocupa 114–176 — nenhuma peça do chão pode passar de 110 nem começar antes
   de 180, senão encosta nele. */
.dq-on-casinha .dq-casinha { display: block; left: 2px; bottom: 2px; width: 36px; height: 36px; }
.dq-on-arbusto .dq-arbusto { display: block; left: 40px; bottom: 0; width: 24px; height: 24px; }
.dq-on-poste .dq-poste { display: block; left: 66px; bottom: 0; width: 26px; height: 26px; }
.dq-on-cata_vento .dq-cata_vento { display: block; left: 8px; bottom: 40px; width: 24px; height: 24px; opacity: .9; }
/* right 76 e não 46: o slot 2 do canteiro ocupa 38..70 quando comprado */
.dq-on-banquinho .dq-banquinho { display: block; right: 76px; bottom: 0; width: 26px; height: 26px; }
/* Antena do Super Bit: no fundo, entre o cata-vento e a cerca */
.dq-on-antena .dq-antena { display: block; left: 38px; bottom: 40px; width: 26px; height: 26px; opacity: .9; }
.dq-on-cerca .dq-cerca { display: block; right: 4px; bottom: 32px; width: 74px; height: 16px; opacity: .85; }
/* Caixa QUADRADA: o viewBox e' 16x16 e o SVG preserva a proporcao — numa
   caixa 28x36 o desenho encolhe pra caber na largura e sobra tarja em cima
   e embaixo (foi por isso que a flor nasceu miudinha na 1a rodada). */
/* Dois canteiros: o slot 1 no canto direito (o de sempre) e o slot 2 ao lado,
   só quando o "Canteiro extra" foi comprado */
.dq-on-canteiro .dq-slot-1 { display: block; right: 6px; bottom: 0; width: 32px; height: 32px; }
.dq-on-canteiro2 .dq-slot-2 { display: block; right: 38px; bottom: 0; width: 32px; height: 32px; }

/* O canteiro é o único clicável (plantar / colher acontecem NO palco) */
.dq-canteiro { pointer-events: auto; cursor: pointer; z-index: 4; }
.dq-canteiro:focus-visible { outline: 2px solid var(--focus, #2196f3); outline-offset: 2px; }
.dq-canteiro:hover { transform: translateY(-1px); }

/* Estágios da planta: o canteiro carrega .dq-e-0 … .dq-e-3 (estágio) e
   .dq-t-<tipo> (o que está plantado). Semente e broto são iguais pra todas;
   do estágio 2 em diante cada planta tem o desenho dela.
   PLANTA NOVA = 2 grupos no SVG + 2 linhas aqui + 1 linha em PLANTAS. */
/* ⚠️ Especificidade: a regra que ESCONDE tem 2 classes + elemento (0,2,1) —
   quem mostra precisa de 3 classes pra vencer. Por isso todo seletor abaixo
   começa no .dq-canteiro (ou no par tipo+estágio, que já dá 3). */
.dq-canteiro g[class^="dq-p"] { display: none; }
.dq-canteiro.dq-e-0 .dq-p-0 { display: block; }
.dq-canteiro.dq-e-1 .dq-p-1 { display: block; }
.dq-t-flor.dq-e-2 .dq-p2-flor { display: block; }
.dq-t-flor.dq-e-3 .dq-p3-flor { display: block; }
.dq-t-bateria.dq-e-2 .dq-p2-bateria { display: block; }
.dq-t-bateria.dq-e-3 .dq-p3-bateria { display: block; }
.dq-t-cristal.dq-e-2 .dq-p2-cristal { display: block; }
.dq-t-cristal.dq-e-3 .dq-p3-cristal { display: block; }
/* Madura chama a atenção: pulinho retrô + brilhos alternados */
.dq-e-3 .dq-canteiro { animation: dq-pulsa 1s steps(2) infinite; }
@keyframes dq-pulsa { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-3px); } }
.dq-brilho-a { animation: dq-brilha .8s steps(1) infinite; }
.dq-brilho-b { animation: dq-brilha .8s steps(1) .4s infinite; }
@keyframes dq-brilha { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* O Bit SENTA no banquinho: anda até lá, abaixa e fica um tempinho de boa.
   A distância vem do JS em --dq-banco-dx (medida no palco real) — posição
   fixa em px quebraria em painel estreito/largo. Olhinhos ^ ^ enquanto senta. */
.dpet-anim-senta {
    animation: dq-senta var(--dq-senta-dur, 9s) ease-in-out 1;
}
@keyframes dq-senta {
    0%   { transform: translate(0, 0); }
    12%  { transform: translate(var(--dq-banco-dx, 60px), 0); }
    18%, 82% { transform: translate(var(--dq-banco-dx, 60px), 12px) scale(.92); }
    88%  { transform: translate(var(--dq-banco-dx, 60px), 0); }
    100% { transform: translate(0, 0); }
}
.dpet-anim-senta .dpet-set-n .dpet-olhos-abertos { display: none; }
.dpet-anim-senta .dpet-olhos-caret { display: block; }

/* Poste: a lâmpada fica APAGADA de dia (cor da tinta) e acende de noite —
   é a graça de comprar o poste */
.dq-item .dq-luz { fill: #10151a; }
.dq-noite .dq-item .dq-luz { fill: #ffc107; }

/* Cata-vento: 2 frames alternados (cruz + / cruz X) = giro retrô. Gira devagar
   sempre e ACELERA quando o Bit pula (.dq-vento, 700ms, posto pelo JS) */
   O giro é o grupo das pás ESPELHANDO (scaleX): pá em "L" espelhada muda de
   sentido e lê como rotação — sem borrar a grade como um rotate() faria, e
   sem nenhuma pose simétrica (que viraria cruz). */
.dq-item g { transform-box: fill-box; transform-origin: center; }
.dq-cata_vento .dq-pas { animation: dq-gira 1.4s steps(1) infinite; }
.dq-vento .dq-cata_vento .dq-pas { animation-duration: .25s; }
@keyframes dq-gira { 0%, 49% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }

/* Ícone da vitrine da Lojinha: mesmo pixel, fora do palco (sem position).
   Precisa dos 2 nomes — `.dq-item` sozinho é display:none. */
.dq-item.dq-loja-icone {
    display: block;
    position: static;
    width: 22px; height: 22px;
    flex: 0 0 22px;
}

/* Noite (hora LOCAL do aluno, ligada pelo JS): grama escurece, janela acende */
.dpet-stage.dq-noite {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0,0,0,.07) 7px, rgba(0,0,0,.07) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0,0,0,.07) 7px, rgba(0,0,0,.07) 9px),
        #2c5c3a;
}
.dq-noite .dq-item .dq-janela { fill: #ff9800; }
.dq-vagalume {
    position: absolute;
    display: none;
    width: 3px; height: 3px;
    background: #ffc107;
}
.dq-noite .dq-vagalume { display: block; }
/* Fora da faixa central (35–65%): ali mora o Bit, e vagalume em cima da
   antena dele parece bug, não bicho */
.dq-vg-1 { left: 22%; top: 14%; animation: dq-vaga 4s steps(4) infinite; }
.dq-vg-2 { left: 30%; top: 58%; animation: dq-vaga 5.5s steps(4) 1s infinite; }
.dq-vg-3 { left: 72%; top: 22%; animation: dq-vaga 6s steps(4) 2s infinite; }
@keyframes dq-vaga {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    30% { opacity: 1; }
    50% { opacity: .4; transform: translate(6px, -6px); }
    80% { opacity: 1; transform: translate(-4px, -11px); }
}

/* Plaquinha: a instrução mora no palco, não em botão novo no menu */
.dq-placa {
    position: absolute;
    left: 50%; bottom: 2px;
    transform: translateX(-50%);
    max-width: 94%;
    font: 700 9px/1.2 ui-monospace, monospace;
    color: #0f2a12;
    background: rgba(255, 255, 255, .6);
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
}
.dq-placa:empty { display: none; }

/* ---- Acessibilidade: sem movimento, só poses */
@media (prefers-reduced-motion: reduce) {
    .dpet-festa,
    .dq-e-3 .dq-canteiro,
    .dq-brilho-a,
    .dq-brilho-b,
    .dq-vagalume,
    .dq-cata_vento .dq-pas,
    .dpet-rig,
    .dpet-stage-sprite,
    .dpet-e-radiante .dpet-sparks rect,
    .dpet-anim-pula .dpet-rig,
    .dpet-anim-aceno .dpet-arm-dir,
    .dpet-anim-atchim .dpet-rig,
    .dpet-anim-come .dpet-rig,
    .dpet-anim-serelepe .dpet-rig,
    .dpet-anim-foguete .dpet-rig,
    .dpet-anim-foguete .dpet-chama-a,
    .dpet-anim-foguete .dpet-chama-b,
    .dpet-zzz-a,
    .dpet-zzz-b,
    .dpet-nv-3 .dpet-sparks rect,
    .dpet-cos-luzinha .dpet-luzinha rect,
    .dpet-cos-estrela_cadente .dpet-cd-a,
    .dpet-cos-estrela_cadente .dpet-cd-b,
    .dpet-tag--lendario,
    .dpet-anim-come .dpet-boca-aberta,
    .dpet-anim-come .dpet-comida-a,
    .dpet-anim-come .dpet-comida-b,
    .dpet-anim-come .dpet-comida-c,
    .dpet-anim-amor .dpet-olhos-coracao,
    .dpet-part,
    .dpet-confete:not([hidden])::before { animation: none !important; }
    /* Sem movimento: boca fechada + bateria inteira (poses estaticas) */
    .dpet-anim-come .dpet-boca-aberta { display: none; }
    .dpet-anim-come .dpet-comida-b,
    .dpet-anim-come .dpet-comida-c { opacity: 0; }
    .dpet-panel:not([hidden]) { animation: none; }
    .dpet-fome i { transition: none; }
    .dpet-fase-fio i { transition: none; }
}

/* ============================================================================
   Lojinha v2 — guarda-roupa de 4 slots (cabeca / rosto / corpo / antena)
   O JS aplica .dpet-cos-<item> no wrapper a partir de pet.equipados (um por
   slot); item novo no catalogo so precisa do desenho no sprite + 1 regra aqui.
   ========================================================================== */
.dpet-sprite .dpet-bandeira,
.dpet-sprite .dpet-estrela,
.dpet-sprite .dpet-luzinha,
.dpet-sprite .dpet-boina,
.dpet-sprite .dpet-coroa,
.dpet-sprite .dpet-capa,
.dpet-sprite .dpet-bigode,
.dpet-sprite .dpet-viseira,
.dpet-sprite .dpet-mascara,
.dpet-sprite .dpet-oculos_sabio,
.dpet-sprite .dpet-cinto,
.dpet-sprite .dpet-rodinhas,
.dpet-sprite .dpet-estrela_fogo,
.dpet-sprite .dpet-estrela_verde,
.dpet-sprite .dpet-estrela_cadente,
.dpet-sprite .dpet-chapeu_palha,
.dpet-sprite .dpet-coroa_fogo,
.dpet-sprite .dpet-dragonas,
.dpet-sprite .dpet-cachecol { display: none; }
.dpet-cos-chapeu .dpet-chapeu, /* espelho do .dpet-has-chapeu (JS antigo em cache) */
.dpet-cos-boina .dpet-boina,
.dpet-cos-coroa .dpet-coroa,
.dpet-cos-capa .dpet-capa,
.dpet-cos-bigode .dpet-bigode,
.dpet-cos-viseira .dpet-viseira,
.dpet-cos-mascara .dpet-mascara,
.dpet-cos-oculos_sabio .dpet-oculos_sabio,
.dpet-cos-cinto .dpet-cinto,
.dpet-cos-rodinhas .dpet-rodinhas,
.dpet-cos-cachecol .dpet-cachecol,
.dpet-cos-bandeira .dpet-bandeira,
.dpet-cos-estrela .dpet-estrela,
.dpet-cos-luzinha .dpet-luzinha,
.dpet-cos-estrela_fogo .dpet-estrela_fogo,
.dpet-cos-estrela_verde .dpet-estrela_verde,
.dpet-cos-estrela_cadente .dpet-estrela_cadente,
.dpet-cos-chapeu_palha .dpet-chapeu_palha,
.dpet-cos-coroa_fogo .dpet-coroa_fogo,
.dpet-cos-dragonas .dpet-dragonas { display: block; }
/* Cabeca que cobre o topo esconde a antena em todas as versoes (regra do chapeu) */
.dpet-cos-chapeu .dpet-antena, .dpet-cos-chapeu .dpet-antena-dupla, .dpet-cos-chapeu .dpet-antena-murcha,
.dpet-cos-boina .dpet-antena, .dpet-cos-boina .dpet-antena-dupla, .dpet-cos-boina .dpet-antena-murcha,
.dpet-cos-coroa .dpet-antena, .dpet-cos-coroa .dpet-antena-dupla, .dpet-cos-coroa .dpet-antena-murcha,
.dpet-cos-chapeu_palha .dpet-antena, .dpet-cos-chapeu_palha .dpet-antena-dupla, .dpet-cos-chapeu_palha .dpet-antena-murcha,
.dpet-cos-coroa_fogo .dpet-antena, .dpet-cos-coroa_fogo .dpet-antena-dupla, .dpet-cos-coroa_fogo .dpet-antena-murcha { display: none; }
/* Topper mora NA antena: some quando a cabeca a cobre e quando a fome a murcha */
.dpet-cos-chapeu .dpet-toppers, .dpet-cos-foguete .dpet-toppers,
.dpet-cos-boina .dpet-toppers, .dpet-cos-coroa .dpet-toppers,
.dpet-cos-chapeu_palha .dpet-toppers, .dpet-cos-coroa_fogo .dpet-toppers,
.dpet-e-fominha .dpet-toppers, .dpet-e-muita_fome .dpet-toppers { display: none; }
/* A cauda da Estrela Cadente pisca alternado (lendario tem que parecer vivo) */
.dpet-cos-estrela_cadente .dpet-cd-a { animation: dpet-pisca-spark 1.1s steps(1) infinite; }
.dpet-cos-estrela_cadente .dpet-cd-b { animation: dpet-pisca-spark 1.1s steps(1) .4s infinite; }
/* Nivel 3: o topper pula pra ponta DIREITA da antena dupla (1px = 1 unidade
   do viewBox no SVG; translate nao sofre do transform-origin global) */
.dpet-nv-3 .dpet-toppers { transform: translate(1px, -1px); }
/* A Luzinha pisca de verdade (listada no bloco reduced-motion la em cima) */
.dpet-cos-luzinha .dpet-luzinha rect { animation: dpet-pisca-spark 1.1s steps(1) infinite; }
.dpet-cos-luzinha .dpet-luzinha rect:nth-child(3) { animation-delay: .35s; }
/* O amor esconde o rosto postico (mesma regra que ja valia pros oculos) */
.dpet-anim-amor .dpet-mascara, .dpet-anim-amor .dpet-viseira, .dpet-anim-amor .dpet-oculos_sabio { display: none; }

/* ---- vitrine: secoes por slot, oferta do dia, equipado, trancado ---- */
.dpet-loja-lista li.dpet-loja-secao {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 8px 2px 0;
    font: 700 9.5px/1 ui-monospace, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted, #777);
}
/* Equipado: moldura ambar (a recompensa e VER que esta vestido) */
.dpet-loja-lista li.dpet-item-on {
    border-color: #ffc107;
    box-shadow: 2px 2px 0 rgba(255, 193, 7, .45);
}
/* Trancado por fase: presente na vitrine de proposito — e a meta visivel */
.dpet-loja-lista li.dpet-item-lock > span { opacity: .7; }
/* Tags de raridade (raro = contorno ambar; lendario = fogo pulsando) */
.dpet-tag {
    display: inline-block;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    padding: 1px 3px;
    border-radius: 2px;
    vertical-align: 1px;
}
.dpet-tag--raro {
    color: #b8860b;
    border: 1px solid #ffc107;
}
.dpet-tag--lendario {
    background: #ff9800;
    color: #10151a;
    animation: dpet-selo-pulsa 1.6s steps(2) infinite;
}
/* Selo "-30% hoje" da oferta do dia */
.dpet-selo {
    display: inline-block;
    background: #ff9800;
    color: #10151a;
    font: 700 9px/1 ui-monospace, monospace;
    padding: 2px 4px;
    border-radius: 3px;
    vertical-align: 1px;
    animation: dpet-selo-pulsa 1.6s steps(2) infinite;
}
@keyframes dpet-selo-pulsa { 0%, 100% { transform: none; } 50% { transform: translateY(-1px); } }
/* Preco riscado ao lado do preco de hoje */
.dpet-loja-lista button s { opacity: .55; font-weight: 400; margin-right: 3px; }

/* ============================================================================
   SALINHA DE JOGOS (Brincar v2) — estrutura das views de jogo
   Os motores moram no dori-pet-jogos.js (lazy: so carrega no 1o clique em
   Brincar). Jogo NAO paga Parafuso (norte do pet: so estudo gera valor) —
   a recompensa e o Bit vibrando no palco (a "torcida"; quando a Familia de
   Bits nascer na F3, os retratos dos formados sentam ai) e o contador de
   brincadeiras que alimenta a conquista da Lojinha (Bolinhas de Malabares).
   ========================================================================== */
/* Bolinhas de Malabares (topper da antena; premio de 30 brincadeiras) */
.dpet-sprite .dpet-malabares { display: none; }
.dpet-cos-malabares .dpet-malabares { display: block; }

.dpet-jogos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dpet-jogos-grid button {
    min-height: 54px;
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #111);
    font: 600 12.5px/1.2 inherit;
    font-family: inherit;
    padding: 6px 4px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border, #ccc);
}
.dpet-jogos-grid button em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted, #777); margin-top: 2px; }
.dpet-jogos-grid button:active { transform: translate(2px, 2px); box-shadow: none; }
.dpet-jogos-grid button:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--border, #ccc); }

.dpet-jogo-area {
    border: 2px solid var(--border, #ccc);
    background: var(--surface, #fff);
    box-shadow: 2px 2px 0 var(--border, #ccc);
    padding: 12px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.dpet-jogo-msg { margin: 0; min-height: 18px; font-size: 13px; text-align: center; color: var(--text, #111); }

/* Bit-papel-tesoura (duelo estilo Alex Kidd): a ARENA e uma telinha de
   fliperama (escura nos dois temas, igual ao canvas dos outros jogos) com as
   duas maos se encarando, os pips de placar e o grito JAN/KEN/PON no meio.
   A mao do jogador gira no rodizio enquanto a musiquinha toca — quem nao
   trava joga com a que ficou. */
.dpet-ppt { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dpet-ppt-arena {
    position: relative;
    width: 100%;
    display: grid;
    /* minmax(0,1fr) e nao 1fr: nome de pet comprido nao pode esticar a coluna
       (com 1fr o piso e o min-content e o "..." nunca entra) */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--border, #ccc);
    background-color: #10151a;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 8px 8px;
    box-shadow: inset 0 0 0 2px rgba(255, 193, 7, .14);
    overflow: hidden;
}
.dpet-ppt-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dpet-ppt-mao { font-size: 46px; line-height: 1; display: block; }
/* a minha mao espelhada: as duas se encaram, como no duelo do Janken */
.dpet-ppt-eu .dpet-ppt-mao { transform: scaleX(-1); }
.dpet-ppt-quem {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: #8aa0b6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dpet-ppt-pips { display: flex; gap: 4px; }
.dpet-ppt-pips i {
    width: 8px; height: 8px;
    border: 2px solid #3d4b5a;
    background: transparent;
    display: block;
}
.dpet-ppt-pips i.dpet-ppt-pip-on { background: #ffc107; border-color: #ffc107; }
.dpet-ppt-vs { font: 800 13px/1 inherit; color: #ffc107; text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
/* o grito nasce no mesmo pixel do VS: quem grita manda */
.dpet-ppt-arena.dpet-ppt-gritando .dpet-ppt-vs { visibility: hidden; }
.dpet-ppt-lado.dpet-ppt-venceu .dpet-ppt-mao { animation: dpet-ppt-comemora .42s steps(3) 2; }
.dpet-ppt-lado.dpet-ppt-perdeu .dpet-ppt-mao { filter: grayscale(1); opacity: .5; }
.dpet-ppt-lado.dpet-ppt-travou .dpet-ppt-mao { animation: dpet-ppt-travou .3s steps(2); }
.dpet-ppt-arena.dpet-ppt-bate { animation: dpet-ppt-bate .4s steps(4); }
.dpet-ppt-arena.dpet-ppt-tremor { animation: dpet-ppt-tremor .3s steps(3) 2; }
.dpet-ppt-arena.dpet-ppt-acabou { box-shadow: inset 0 0 0 2px rgba(255, 193, 7, .5); }

/* O grito da contagem: entra grande e sai sumindo (steps = cheiro de 8 bits) */
.dpet-ppt-grito {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none;
    font: 800 30px/1 inherit;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 3px 3px 0 #10151a, 0 0 12px rgba(255, 193, 7, .55);
    opacity: 0;
}
.dpet-ppt-grito.dpet-ppt-visivel { opacity: 1; }
.dpet-ppt-grito.dpet-ppt-pop { animation: dpet-ppt-grito .42s steps(4) forwards; }

@keyframes dpet-ppt-grito {
    0%   { opacity: 1; transform: scale(1.55); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.92); }
}
@keyframes dpet-ppt-bate {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.03); }
    60%  { transform: scale(.99); }
    100% { transform: scale(1); }
}
@keyframes dpet-ppt-tremor {
    0%, 100% { transform: translateX(0); }
    33%      { transform: translateX(-4px); }
    66%      { transform: translateX(4px); }
}
@keyframes dpet-ppt-comemora {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.12); }
}
/* a minha mao e espelhada — a animacao de travar preserva o scaleX(-1) */
@keyframes dpet-ppt-travou {
    0%   { filter: brightness(2); }
    100% { filter: brightness(1); }
}

.dpet-ppt-maos { display: flex; gap: 12px; }
.dpet-ppt-maos button {
    width: 62px; height: 62px;
    font-size: 30px;
    line-height: 1;
    border: 2px solid var(--border, #ccc);
    background: var(--bg-2, #f2f2f2);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border, #ccc);
    padding: 0;
    transition: border-color .1s linear, background-color .1s linear;
}
.dpet-ppt-maos button:active { transform: translate(2px, 2px); box-shadow: none; }
/* :disabled tem que vir DEPOIS de .dpet-ppt-foco: entre rodadas o rodizio para
   e os botoes apagam juntos (senao a mao em foco fica acesa e mente) */
.dpet-ppt-maos button.dpet-ppt-foco { border-color: #ffc107; background: rgba(255, 193, 7, .2); }
.dpet-ppt-maos button.dpet-ppt-travada { box-shadow: 0 0 0 3px rgba(255, 193, 7, .35); }
.dpet-ppt-maos button:disabled { opacity: .5; cursor: default; transform: none; }

/* Jogo da memoria: a face das cartas usa os MESMOS pixels do quintal
   (template #dpetJogoIcones server-rendered — zero arte nova) */
.dpet-mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.dpet-mem-carta {
    aspect-ratio: 1;
    border: 2px solid var(--border, #ccc);
    background: var(--bg-2, #f2f2f2);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 20px;
    padding: 0;
    box-shadow: 2px 2px 0 var(--border, #ccc);
    transition: transform .15s ease;
}
.dpet-mem-carta .dq-loja-icone { width: 30px; height: 30px; flex: none; }
.dpet-mem-carta > .dpet-mem-frente { display: none; line-height: 0; }
.dpet-mem-carta.dpet-mem-aberta > .dpet-mem-frente { display: block; }
.dpet-mem-carta.dpet-mem-aberta > .dpet-mem-verso { display: none; }
.dpet-mem-carta.dpet-mem-aberta { background: var(--surface, #fff); transform: scale(1.04); cursor: default; }
.dpet-mem-carta.dpet-mem-par { border-color: #ffc107; box-shadow: 2px 2px 0 rgba(255, 193, 7, .5); }

/* Canvas dos jogos de acao (cobrinha/navinha): o "monitor" do Bit */
.dpet-jogo-area canvas { display: block; touch-action: none; border: 2px solid var(--border, #ccc); background: #10151a; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .dpet-mem-carta { transition: none; }
    /* o duelo continua jogavel: o rodizio fica lento (JS) e o resto nao mexe */
    .dpet-ppt-maos button { transition: none; }
    .dpet-ppt-grito.dpet-ppt-pop,
    .dpet-ppt-arena.dpet-ppt-bate,
    .dpet-ppt-arena.dpet-ppt-tremor,
    .dpet-ppt-lado.dpet-ppt-travou .dpet-ppt-mao,
    .dpet-ppt-lado.dpet-ppt-venceu .dpet-ppt-mao { animation: none; }
    .dpet-ppt-grito.dpet-ppt-pop { opacity: 1; }
}

/* ---- "Lembra disso?" (F3, 2026-08-15): card de revisao vencida injetado no CHAT da Dori
   pelo dori-pet.js quando o widget abre. Cor so por token; verde do palco (identidade do pet). */
.dpet-lembra { background: linear-gradient(135deg, #052e2b, #0f4c45); border-left: 4px solid #5cb552; border-radius: 12px; padding: 12px 14px; color: #ecfdf5; }
.dpet-lembra-cab { font-size: 12.5px; color: #a7f3d0; margin-bottom: 4px; }
.dpet-lembra-perg { font-size: 14px; font-weight: 600; line-height: 1.45; }
.dpet-lembra-rod { margin-top: 8px; font-size: 12px; color: #a7f3d0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dpet-lembra-btn { background: #5cb552; color: #10151a; border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 700; cursor: pointer; font: inherit; font-size: 12px; }
.dpet-lembra-btn:hover { filter: brightness(1.08); }