/*   CSS FILE HEADER #
 *
 *   File:         [bichos.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['10.10.2026']
 *   Version:      ['0.3.0']
 *   Description:  ['Stream-pet layer (apps/comum/bichos.js): crisp pixels, the pixel name plate on hover, the grab cursor, the pixel speech bubble, the stolen cursor, the things of the hoarder and the captcha of the MegaBrain. The layer sits above the app and effects (900) but below the quick panel, conjuring circle (950), toasts (1000) and dialogs (top layer).']
 */

.bichos-camada { position: fixed; inset: 0; z-index: 930; pointer-events: none; overflow: hidden; }
.bichos-camada canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.bicho { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; will-change: transform; user-select: none; -webkit-user-select: none; touch-action: none; }
.bicho.segurado { cursor: grabbing; }
.bicho-sprite { display: block; transform-origin: 50% 100%; }
.bicho-espectral .bicho-sprite { transform-origin: 50% 50%; }

/* pixel name plate: dark wood with a gold rim, shown on hover */
.bicho-placa {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
    padding: 3px 8px 2px; font: 600 12px/1.2 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #f6e7c1;
    background: #2a1b10; border: 2px solid #d9b25a; border-radius: 0;
    box-shadow: 0 0 0 2px #120a05, 2px 2px 0 2px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s, transform .15s;
}
.bicho-placa::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: 6px; height: 4px; margin-left: -3px; background: #d9b25a;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.bicho:hover .bicho-placa, .bicho.segurado .bicho-placa { opacity: 1; transform: translate(-50%, 0); }
.bicho-espectral .bicho-placa { color: #eaf6ff; background: rgba(14, 26, 44, .88); border-color: #a8d8ff; box-shadow: 0 0 0 2px #050a14, 0 0 12px rgba(168, 216, 255, .55); }
.bicho-espectral .bicho-placa::after { background: #a8d8ff; }

/* the paw that hides the creatures: bottom left corner (the roll slip and the toasts live on the right), above the layer, wood and gold like the name plate */
.bichos-botao {
    position: fixed; left: 14px; bottom: 14px; z-index: 940; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px;
    font: 600 13px/1 'Cinzel', Georgia, serif; letter-spacing: .03em; color: #f6e7c1; background: #2a1b10; border: 2px solid #d9b25a; border-radius: 0;
    box-shadow: 0 0 0 2px #120a05, 3px 3px 0 2px rgba(0, 0, 0, .45); cursor: pointer; opacity: .78; transition: opacity .15s, transform .15s;
}
.bichos-botao:hover, .bichos-botao:focus-visible { opacity: 1; transform: translateY(-1px); }
.bichos-botao.oculto-bichos { opacity: .6; color: #d9c8a0; }
.bichos-botao[hidden] { display: none; }

/* coins dropped by the golden familiar: they glint on the floor until the mouse picks them up */
.bichos-moeda { will-change: transform; filter: drop-shadow(0 0 3px rgba(255, 210, 80, .65)); transition: opacity .3s, filter .3s; }
.bichos-moeda.pousada { animation: bichos-brilho-moeda 2.4s ease-in-out infinite; }
.bichos-moeda.pega { opacity: 0; filter: brightness(2) drop-shadow(0 0 8px #ffe27a); }
@keyframes bichos-brilho-moeda { 0%, 70%, 100% { filter: drop-shadow(0 0 3px rgba(255, 210, 80, .55)); } 80% { filter: brightness(1.5) drop-shadow(0 0 7px #ffe27a); } }

/* pixel speech bubble of the people (drawn in a canvas: stepped box, pixel font); it fades in and out */
.bichos-balao { opacity: 0; transition: opacity .25s; will-change: transform; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25)); }
.bichos-balao canvas { display: block; }
.bichos-balao-rabo { position: absolute; }

/* the Rage Baiter took the cursor: the real one disappears everywhere until it falls back */
html.bichos-sem-cursor, html.bichos-sem-cursor * { cursor: none !important; }
.bichos-seta { will-change: transform; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35)); }

/* temporary test menu (MENU_TESTE in bichos.js): a button over the paw, a compact paper panel with every animation of the pets */
.bichos-botao.bichos-botao-teste { bottom: 52px; }
.bichos-menu-teste {
    position: fixed; left: 14px; bottom: 92px; z-index: 941; width: min(340px, calc(100vw - 28px)); max-height: 62vh; overflow: auto; padding: 8px 10px 10px;
    color: #2b1d14; background: #f3e7c9; border: 2px solid #d9b25a; box-shadow: 0 0 0 2px #120a05, 3px 3px 0 2px rgba(0, 0, 0, .45);
    font: 13px/1.3 'Cormorant Garamond', Georgia, serif;
}
.bichos-menu-teste[hidden] { display: none; }
.bichos-menu-teste section + section { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #b89a5c; }
.bichos-menu-teste h3 { margin: 0 0 4px; font: 600 14px 'Cinzel', Georgia, serif; color: #5a3410; }
.bichos-menu-teste h3 small { font: 12px Georgia, serif; color: #7a6040; margin-left: 4px; }
.bichos-menu-teste h4 { margin: 6px 0 3px; font: 600 11px 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #7a5424; text-transform: uppercase; }
.bichos-menu-botoes { display: flex; flex-wrap: wrap; gap: 4px; }
.bichos-menu-botoes button {
    padding: 2px 7px; font: 600 12px/1.3 Georgia, serif; color: #f6e7c1; background: #3a2616; border: 1px solid #120a05; border-radius: 0; cursor: pointer;
}
.bichos-menu-botoes button:hover, .bichos-menu-botoes button:focus-visible { background: #6a4420; outline: none; }

/* the hoarder's things: the person can take them first (mouse over or click) */
.bichos-coisa { cursor: pointer; }

/* the captcha of the MegaBrain: a little pixel window next to it, never modal (any square answers it, it closes by itself) */
.bichos-captcha {
    position: absolute; z-index: 5; pointer-events: auto; width: 176px; padding: 0 0 8px; background: #f4f1ea; color: #20242c;
    border: 2px solid #20242c; box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); font: 600 12px/1.25 system-ui, sans-serif; image-rendering: pixelated;
}
.bichos-captcha-titulo { padding: 6px 8px; margin-bottom: 8px; background: #3f6fd6; color: #fff; border-bottom: 2px solid #20242c; }
.bichos-captcha-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 8px; }
.bichos-captcha-quadro { display: grid; place-items: center; height: 40px; padding: 0; background: #e2ddd0; border: 2px solid #20242c; border-radius: 0; cursor: pointer; }
.bichos-captcha-quadro:hover, .bichos-captcha-quadro:focus-visible { background: #fff6cf; outline: none; }
.bichos-captcha-quadro canvas { width: 28px; height: 28px; image-rendering: pixelated; }

/* the image the MegaBrain "generated" and the vignette of the god of ambiguity */
.bichos-imagem canvas { image-rendering: pixelated; }
.bichos-vinheta { transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
    .bicho-placa { transition: none; }
    .bichos-moeda.pousada { animation: none; }
    .bichos-balao { transition: none; }
}