/* ============================================================
   public/Spellsanimations/smash.css
   Efeito da spell "Devastating Smash" do Knight
   (esmagamento_devastador): uma MÃO FECHADA de couro marrom em
   pixel art (box-shadow) cai de cima e crava no alvo, com rastro
   de queda, flash e estrelinhas de impacto. 100% CSS/DOM.

   Integração: #melee-fx-layer + spawnSmashFX() em game.js.
   O layer é sincronizado com a câmera a cada frame; o ponto
   (16,16) do .smash-fx__stage (centro do impacto) coincide com o
   centro do SQM do alvo (left/top via JS, mesmo esquema da luva
   do Concussive Blow). Não é direcional: é um golpe de cima pra
   baixo, ancorado no alvo.
   ============================================================ */

.smash-fx {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 40;
    image-rendering: pixelated;
}

/* Palco 32x32: o centro (16,16) = ponto de impacto = ancoragem */
.smash-fx__stage {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
}

/* ------------------------------------------------------------
   PALETA DE CORES:
   #2b1408 = Outline / contorno escuro do couro
   #3a1c0f = Sombra profunda do couro
   #5c2e17 = Couro tom escuro
   #8a4a26 = Couro base
   #c17f4e = Couro tom médio (luz)
   #e8b483 = Highlight / brilho do couro
   #d92b25 / #80100d = Vermelho do rastro de queda
   #ffffff / #ffe600 = Flash e estrelinhas do impacto
   ------------------------------------------------------------ */

/* MÃO FECHADA — caindo de cima para baixo */
.smash-fx__fist {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        14px 2px #2b1408, 15px 2px #8a4a26, 16px 2px #8a4a26, 17px 2px #8a4a26, 18px 2px #2b1408,
        13px 3px #2b1408, 14px 3px #3a1c0f, 15px 3px #3a1c0f, 16px 3px #3a1c0f, 17px 3px #3a1c0f, 18px 3px #3a1c0f, 19px 3px #2b1408,
        13px 4px #2b1408, 14px 4px #8a4a26, 15px 4px #c17f4e, 16px 4px #c17f4e, 17px 4px #8a4a26, 18px 4px #8a4a26, 19px 4px #2b1408,
        12px 5px #2b1408, 13px 5px #8a4a26, 14px 5px #c17f4e, 15px 5px #e8b483, 16px 5px #e8b483, 17px 5px #c17f4e, 18px 5px #8a4a26, 19px 5px #8a4a26, 20px 5px #2b1408,
        12px 6px #2b1408, 13px 6px #8a4a26, 14px 6px #c17f4e, 15px 6px #e8b483, 16px 6px #e8b483, 17px 6px #c17f4e, 18px 6px #8a4a26, 19px 6px #8a4a26, 20px 6px #2b1408,
        11px 7px #2b1408, 12px 7px #5c2e17, 13px 7px #8a4a26, 14px 7px #c17f4e, 15px 7px #c17f4e, 16px 7px #c17f4e, 17px 7px #c17f4e, 18px 7px #8a4a26, 19px 7px #8a4a26, 20px 7px #5c2e17, 21px 7px #2b1408,
        10px 8px #2b1408, 11px 8px #c17f4e, 12px 8px #8a4a26, 13px 8px #2b1408, 14px 8px #8a4a26, 15px 8px #c17f4e, 16px 8px #c17f4e, 17px 8px #c17f4e, 18px 8px #8a4a26, 19px 8px #8a4a26, 20px 8px #5c2e17, 21px 8px #2b1408,
        10px 9px #2b1408, 11px 9px #e8b483, 12px 9px #8a4a26, 13px 9px #2b1408, 14px 9px #8a4a26, 15px 9px #3a1c0f, 16px 9px #c17f4e, 17px 9px #3a1c0f, 18px 9px #8a4a26, 19px 9px #3a1c0f, 20px 9px #5c2e17, 21px 9px #2b1408,
        11px 10px #2b1408, 12px 10px #8a4a26, 13px 10px #2b1408, 14px 10px #8a4a26, 15px 10px #3a1c0f, 16px 10px #c17f4e, 17px 10px #3a1c0f, 18px 10px #8a4a26, 19px 10px #3a1c0f, 20px 10px #5c2e17, 21px 10px #2b1408,
        12px 11px #2b1408, 13px 11px #5c2e17, 14px 11px #8a4a26, 15px 11px #3a1c0f, 16px 11px #c17f4e, 17px 11px #3a1c0f, 18px 11px #8a4a26, 19px 11px #5c2e17, 20px 11px #2b1408,
        12px 12px #2b1408, 13px 12px #8a4a26, 14px 12px #c17f4e, 15px 12px #e8b483, 16px 12px #e8b483, 17px 12px #c17f4e, 18px 12px #8a4a26, 19px 12px #2b1408,
        12px 13px #2b1408, 13px 13px #c17f4e, 14px 13px #3a1c0f, 15px 13px #e8b483, 16px 13px #3a1c0f, 17px 13px #e8b483, 18px 13px #3a1c0f, 19px 13px #c17f4e, 20px 13px #2b1408,
        13px 14px #2b1408, 14px 14px #8a4a26, 15px 14px #3a1c0f, 16px 14px #c17f4e, 17px 14px #3a1c0f, 18px 14px #8a4a26, 19px 14px #2b1408,
        14px 15px #2b1408, 15px 15px #5c2e17, 16px 15px #8a4a26, 17px 15px #5c2e17, 18px 15px #2b1408,
        15px 16px #2b1408, 16px 16px #3a1c0f, 17px 16px #2b1408;

    animation: smash-fist 0.5s steps(1) forwards;
}

/* Rastro de queda acima da mão */
.smash-fx__trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        13px -5px #d92b25, 19px -5px #d92b25,
        12px -9px #ffffff, 20px -9px #ffffff,
        13px -14px #80100d, 19px -14px #80100d;
    animation: smash-trail 0.4s steps(1) forwards;
}

/* Flash de impacto: pisca em degraus de opacidade, sem scale (o scale
   fracionário deixaria o sprite borrado — aqui é pixel art cru). */
.smash-fx__flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        14px 14px #ffffff, 15px 14px #ffffff, 16px 14px #ffffff, 17px 14px #ffffff, 18px 14px #ffffff,
        13px 15px #ffffff, 14px 15px #ffe600, 15px 15px #ffffff, 16px 15px #ffffff, 17px 15px #ffe600, 18px 15px #ffffff, 19px 15px #ffffff,
        14px 16px #ffffff, 15px 16px #ffffff, 16px 16px #ffffff, 17px 16px #ffffff, 18px 16px #ffffff,
        14px 17px #ffffff, 15px 17px #ffe600, 16px 17px #ffffff, 17px 17px #ffe600, 18px 17px #ffffff;
    animation: smash-flash 0.22s steps(1) 0.2s forwards;
}

/* Estrelinha do impacto (uma por direção; --dx/--dy via JS, sempre
   inteiros): pula direto pro destino em 1 degrau e some — sem scale,
   sem easing contínuo (pixel art cru). */
.smash-fx__star {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        0px -3px #ffe600,
        0px -2px #ffffff,
        0px -1px #ffffff,
        -3px 0px #ffe600,
        -2px 0px #ffffff,
        -1px 0px #ffffff,
        0px 0px #ffffff,
        1px 0px #ffffff,
        2px 0px #ffffff,
        3px 0px #ffe600,
        0px 1px #ffffff,
        0px 2px #ffffff,
        0px 3px #ffe600;
    opacity: 0;
    animation: smash-star 0.45s steps(1) 0.22s forwards;
}

/* Mão fechada caindo em degraus inteiros (steps(1)) com ~18 poses em
   0,5s (passagem suave, pixel cru). Queda -26→0 em passos de 2px,
   impacto em 45% ≈ 0.225s = hitDelayMs 225, depois retenção/ricochete. */
@keyframes smash-fist {
    0%   { transform: translateY(-26px); opacity: 0; }
    6%   { transform: translateY(-23px); opacity: 1; }
    10%  { transform: translateY(-21px); }
    14%  { transform: translateY(-18px); }
    18%  { transform: translateY(-16px); }
    22%  { transform: translateY(-14px); }
    26%  { transform: translateY(-11px); }
    30%  { transform: translateY(-9px); }
    34%  { transform: translateY(-7px); }
    38%  { transform: translateY(-5px); }
    42%  { transform: translateY(-2px); }
    45%  { transform: translateY(0px); opacity: 1; }   /* impacto */
    50%  { transform: translateY(1px); }               /* retenção do impacto */
    55%  { transform: translateY(0px); }
    62%  { transform: translateY(-1px); }
    68%  { transform: translateY(-2px); }
    75%  { transform: translateY(-3px); }
    100% { transform: translateY(-3px); opacity: 0; }
}

@keyframes smash-trail {
    0%   { opacity: 0.9; }
    80%  { opacity: 0.3; }
    100% { opacity: 0; }
}

@keyframes smash-flash {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 0; }
}

@keyframes smash-star {
    0%   { transform: translate(0px, 0px); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}