/* ============================================================
       bladetempest.css v3 — Efeito "Blade Tempest" (64x64)
       13 espadas cravam na area circle_2 ao redor do personagem
       (1 espada por SQM da magia). O JS gera os slots e define
       --tx/--ty (tile em px), --rot e --delay por espada.

       Integracao (mesmo padrao dos outros efeitos):
       #melee-fx-layer + spawnBladeTempestFX() em game.js.
       O ponto (32,32) do .tempest-fx__stage = centro da area de
       efeito = centro do SQM do personagem.
       ============================================================ */

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

    .tempest-fx__stage {
        position: absolute;
        left: -32px;
        top: -32px;
        width: 64px;
        height: 64px;
    }

    @keyframes blade-fall {
        0%   { transform: translateY(-52px); opacity: 0; }
        5%   { transform: translateY(-44px); opacity: 1; }
        15%  { transform: translateY(-33px); }
        25%  { transform: translateY(-23px); }
        35%  { transform: translateY(-13px); }
        45%  { transform: translateY(-5px); }
        55%  { transform: translateY(0px); }   /* impacto */
        60%  { transform: translateY(1.5px); } /* recuo da cravada */
        65%  { transform: translateY(0px); }
        85%  { transform: translateY(0px); opacity: 1; }
        95%  { transform: translateY(0px); opacity: 0.6; }
        100% { transform: translateY(0px); opacity: 0; }
    }

    @keyframes blade-dust {
        0%   { opacity: 0; }
        15%  { opacity: 1; }
        60%  { opacity: 0.5; }
        100% { opacity: 0; }
    }

    .tempest-fx__slot {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        transform: translate(var(--tx), var(--ty));
    }

    .tempest-fx__rot {
        position: absolute;
        left: 0;
        top: 0;
        transform: rotate(var(--rot));
    }

    .tempest-fx__sword {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        background: transparent;
        opacity: 0;
box-shadow:
        -1px -16px #15161a,
        0px -16px #2b2b33,
        1px -16px #15161a,
        -2px -15px #15161a,
        -1px -15px #2b2b33,
        0px -15px #54545f,
        1px -15px #2b2b33,
        2px -15px #15161a,
        -2px -14px #15161a,
        -1px -14px #54545f,
        0px -14px #eef3f7,
        1px -14px #7d7d88,
        2px -14px #54545f,
        3px -14px #15161a,
        -2px -13px #15161a,
        -1px -13px #54545f,
        0px -13px #7d7d88,
        1px -13px #54545f,
        2px -13px #15161a,
        -1px -12px #2b2b33,
        0px -12px #54545f,
        1px -12px #2b2b33,
        -1px -11px #20120a,
        0px -11px #4a2c14,
        1px -11px #7a4f28,
        2px -11px #20120a,
        -1px -10px #20120a,
        0px -10px #7a4f28,
        1px -10px #4a2c14,
        2px -10px #20120a,
        -1px -9px #20120a,
        0px -9px #4a2c14,
        1px -9px #7a4f28,
        2px -9px #20120a,
        -1px -8px #20120a,
        0px -8px #7a4f28,
        1px -8px #4a2c14,
        2px -8px #20120a,
        -1px -7px #20120a,
        0px -7px #4a2c14,
        1px -7px #7a4f28,
        2px -7px #20120a,
        -1px -6px #20120a,
        0px -6px #7a4f28,
        1px -6px #4a2c14,
        2px -6px #20120a,
        -1px -5px #20120a,
        0px -5px #4a2c14,
        1px -5px #7a4f28,
        2px -5px #20120a,
        -1px -4px #20120a,
        0px -4px #7a4f28,
        1px -4px #4a2c14,
        2px -4px #20120a,
        -4px -3px #101116,
        -3px -3px #23262b,
        -2px -3px #6d7680,
        -1px -3px #6d7680,
        0px -3px #6d7680,
        1px -3px #6d7680,
        2px -3px #6d7680,
        3px -3px #6d7680,
        4px -3px #23262b,
        5px -3px #101116,
        -5px -2px #101116,
        -4px -2px #23262b,
        -3px -2px #6d7680,
        -2px -2px #6d7680,
        -1px -2px #aab4bd,
        0px -2px #aab4bd,
        1px -2px #aab4bd,
        2px -2px #aab4bd,
        3px -2px #6d7680,
        4px -2px #6d7680,
        5px -2px #23262b,
        6px -2px #101116,
        -5px -1px #101116,
        -4px -1px #23262b,
        -3px -1px #6d7680,
        -2px -1px #aab4bd,
        -1px -1px #aab4bd,
        0px -1px #eef3f7,
        1px -1px #aab4bd,
        2px -1px #aab4bd,
        3px -1px #6d7680,
        4px -1px #23262b,
        5px -1px #101116,
        -4px 0px #101116,
        -3px 0px #23262b,
        -2px 0px #6d7680,
        -1px 0px #aab4bd,
        0px 0px #aab4bd,
        1px 0px #6d7680,
        2px 0px #23262b,
        3px 0px #101116,
        -5px 1px #33373d,
        -4px 1px #5a636d,
        -3px 1px #93a0ab,
        -2px 1px #c9d3db,
        -1px 1px #eef3f7,
        0px 1px #48505a,
        1px 1px #eef3f7,
        2px 1px #c9d3db,
        3px 1px #93a0ab,
        4px 1px #5a636d,
        5px 1px #33373d,
        -5px 2px #33373d,
        -4px 2px #5a636d,
        -3px 2px #93a0ab,
        -2px 2px #c9d3db,
        -1px 2px #eef3f7,
        0px 2px #48505a,
        1px 2px #eef3f7,
        2px 2px #c9d3db,
        3px 2px #93a0ab,
        4px 2px #5a636d,
        5px 2px #33373d,
        -5px 3px #33373d,
        -4px 3px #5a636d,
        -3px 3px #93a0ab,
        -2px 3px #c9d3db,
        -1px 3px #eef3f7,
        0px 3px #48505a,
        1px 3px #eef3f7,
        2px 3px #c9d3db,
        3px 3px #93a0ab,
        4px 3px #5a636d,
        5px 3px #33373d,
        -5px 4px #33373d,
        -4px 4px #5a636d,
        -3px 4px #93a0ab,
        -2px 4px #c9d3db,
        -1px 4px #eef3f7,
        0px 4px #48505a,
        1px 4px #eef3f7,
        2px 4px #c9d3db,
        3px 4px #93a0ab,
        4px 4px #5a636d,
        5px 4px #33373d,
        -5px 5px #33373d,
        -4px 5px #5a636d,
        -3px 5px #93a0ab,
        -2px 5px #c9d3db,
        -1px 5px #eef3f7,
        0px 5px #48505a,
        1px 5px #eef3f7,
        2px 5px #c9d3db,
        3px 5px #93a0ab,
        4px 5px #5a636d,
        5px 5px #33373d,
        -5px 6px #33373d,
        -4px 6px #5a636d,
        -3px 6px #93a0ab,
        -2px 6px #c9d3db,
        -1px 6px #eef3f7,
        0px 6px #48505a,
        1px 6px #eef3f7,
        2px 6px #c9d3db,
        3px 6px #93a0ab,
        4px 6px #5a636d,
        5px 6px #33373d,
        -5px 7px #33373d,
        -4px 7px #5a636d,
        -3px 7px #93a0ab,
        -2px 7px #c9d3db,
        -1px 7px #eef3f7,
        0px 7px #48505a,
        1px 7px #eef3f7,
        2px 7px #c9d3db,
        3px 7px #93a0ab,
        4px 7px #5a636d,
        5px 7px #33373d,
        -5px 8px #33373d,
        -4px 8px #5a636d,
        -3px 8px #93a0ab,
        -2px 8px #c9d3db,
        -1px 8px #eef3f7,
        0px 8px #48505a,
        1px 8px #eef3f7,
        2px 8px #c9d3db,
        3px 8px #93a0ab,
        4px 8px #5a636d,
        5px 8px #33373d,
        -5px 9px #33373d,
        -4px 9px #5a636d,
        -3px 9px #93a0ab,
        -2px 9px #c9d3db,
        -1px 9px #eef3f7,
        0px 9px #48505a,
        1px 9px #eef3f7,
        2px 9px #c9d3db,
        3px 9px #93a0ab,
        4px 9px #5a636d,
        5px 9px #33373d,
        -5px 10px #33373d,
        -4px 10px #5a636d,
        -3px 10px #93a0ab,
        -2px 10px #c9d3db,
        -1px 10px #eef3f7,
        0px 10px #48505a,
        1px 10px #eef3f7,
        2px 10px #c9d3db,
        3px 10px #93a0ab,
        4px 10px #5a636d,
        5px 10px #33373d,
        -5px 11px #33373d,
        -4px 11px #5a636d,
        -3px 11px #93a0ab,
        -2px 11px #c9d3db,
        -1px 11px #eef3f7,
        0px 11px #48505a,
        1px 11px #eef3f7,
        2px 11px #c9d3db,
        3px 11px #93a0ab,
        4px 11px #5a636d,
        5px 11px #33373d,
        -5px 12px #33373d,
        -4px 12px #5a636d,
        -3px 12px #93a0ab,
        -2px 12px #c9d3db,
        -1px 12px #eef3f7,
        0px 12px #48505a,
        1px 12px #eef3f7,
        2px 12px #c9d3db,
        3px 12px #93a0ab,
        4px 12px #5a636d,
        5px 12px #33373d,
        -5px 13px #33373d,
        -4px 13px #5a636d,
        -3px 13px #93a0ab,
        -2px 13px #c9d3db,
        -1px 13px #eef3f7,
        0px 13px #48505a,
        1px 13px #eef3f7,
        2px 13px #c9d3db,
        3px 13px #93a0ab,
        4px 13px #5a636d,
        5px 13px #33373d,
        -5px 14px #33373d,
        -4px 14px #5a636d,
        -3px 14px #93a0ab,
        -2px 14px #c9d3db,
        -1px 14px #eef3f7,
        0px 14px #48505a,
        1px 14px #eef3f7,
        2px 14px #c9d3db,
        3px 14px #93a0ab,
        4px 14px #5a636d,
        5px 14px #33373d,
        -5px 15px #33373d,
        -4px 15px #5a636d,
        -3px 15px #93a0ab,
        -2px 15px #c9d3db,
        -1px 15px #eef3f7,
        0px 15px #48505a,
        1px 15px #eef3f7,
        2px 15px #c9d3db,
        3px 15px #93a0ab,
        4px 15px #5a636d,
        5px 15px #33373d,
        -5px 16px #33373d,
        -4px 16px #5a636d,
        -3px 16px #93a0ab,
        -2px 16px #c9d3db,
        -1px 16px #eef3f7,
        0px 16px #48505a,
        1px 16px #eef3f7,
        2px 16px #c9d3db,
        3px 16px #93a0ab,
        4px 16px #5a636d,
        5px 16px #33373d,
        -5px 17px #33373d,
        -4px 17px #5a636d,
        -3px 17px #93a0ab,
        -2px 17px #c9d3db,
        -1px 17px #eef3f7,
        0px 17px #48505a,
        1px 17px #eef3f7,
        2px 17px #c9d3db,
        3px 17px #93a0ab,
        4px 17px #5a636d,
        5px 17px #33373d,
        -5px 18px #33373d,
        -4px 18px #5a636d,
        -3px 18px #93a0ab,
        -2px 18px #c9d3db,
        -1px 18px #eef3f7,
        0px 18px #48505a,
        1px 18px #eef3f7,
        2px 18px #c9d3db,
        3px 18px #93a0ab,
        4px 18px #5a636d,
        5px 18px #33373d,
        -5px 19px #33373d,
        -4px 19px #5a636d,
        -3px 19px #93a0ab,
        -2px 19px #c9d3db,
        -1px 19px #eef3f7,
        0px 19px #48505a,
        1px 19px #eef3f7,
        2px 19px #c9d3db,
        3px 19px #93a0ab,
        4px 19px #5a636d,
        5px 19px #33373d,
        -4px 20px #33373d,
        -3px 20px #5a636d,
        -2px 20px #93a0ab,
        -1px 20px #c9d3db,
        0px 20px #eef3f7,
        1px 20px #c9d3db,
        2px 20px #93a0ab,
        3px 20px #5a636d,
        4px 20px #33373d,
        -4px 21px #33373d,
        -3px 21px #5a636d,
        -2px 21px #93a0ab,
        -1px 21px #c9d3db,
        0px 21px #eef3f7,
        1px 21px #c9d3db,
        2px 21px #93a0ab,
        3px 21px #5a636d,
        4px 21px #33373d,
        -3px 22px #33373d,
        -2px 22px #5a636d,
        -1px 22px #eef3f7,
        0px 22px #48505a,
        1px 22px #eef3f7,
        2px 22px #5a636d,
        3px 22px #33373d,
        -2px 23px #33373d,
        -1px 23px #5a636d,
        0px 23px #eef3f7,
        1px 23px #5a636d,
        2px 23px #33373d,
        -1px 24px #33373d,
        0px 24px #eef3f7,
        1px 24px #33373d,
        0px 25px #23262b,
        0px 26px #23262b;
        animation: blade-fall 1.05s steps(1) var(--delay) forwards;
    }

    .tempest-fx__dust {
        position: absolute;
        top: 16px;
        left: 0;
        width: 1px;
        height: 1px;
        background: transparent;
        opacity: 0;
box-shadow:
        -4px 0px #3a342b,
        4px 0px #3a342b,
        -5px 1px #3a342b,
        -4px 1px #6b5f4a,
        -3px 1px #9c8c6c,
        3px 1px #9c8c6c,
        4px 1px #6b5f4a,
        5px 1px #3a342b,
        -6px 2px #3a342b,
        -5px 2px #6b5f4a,
        -4px 2px #9c8c6c,
        -3px 2px #c7b895,
        3px 2px #c7b895,
        4px 2px #9c8c6c,
        5px 2px #6b5f4a,
        6px 2px #3a342b,
        -7px 3px #3a342b,
        -6px 3px #6b5f4a,
        -5px 3px #9c8c6c,
        -4px 3px #c7b895,
        -3px 3px #e8dcc0,
        3px 3px #e8dcc0,
        4px 3px #c7b895,
        5px 3px #9c8c6c,
        6px 3px #6b5f4a,
        7px 3px #3a342b,
        -6px 4px #6b5f4a,
        -5px 4px #9c8c6c,
        -4px 4px #c7b895,
        -3px 4px #e8dcc0,
        0px 4px #e8dcc0,
        1px 4px #c7b895,
        4px 4px #e8dcc0,
        5px 4px #c7b895,
        6px 4px #9c8c6c,
        7px 4px #6b5f4a,
        -5px 5px #9c8c6c,
        -4px 5px #c7b895,
        -3px 5px #e8dcc0,
        -1px 5px #e8dcc0,
        0px 5px #c7b895,
        1px 5px #e8dcc0,
        2px 5px #c7b895,
        4px 5px #e8dcc0,
        5px 5px #c7b895,
        6px 5px #9c8c6c,
        -4px 6px #c7b895,
        -3px 6px #e8dcc0,
        -2px 6px #c7b895,
        -1px 6px #e8dcc0,
        0px 6px #c7b895,
        1px 6px #e8dcc0,
        2px 6px #c7b895,
        3px 6px #e8dcc0,
        4px 6px #c7b895,
        -3px 7px #c7b895,
        -2px 7px #e8dcc0,
        -1px 7px #c7b895,
        0px 7px #e8dcc0,
        1px 7px #c7b895,
        2px 7px #e8dcc0,
        3px 7px #c7b895,
        -2px 8px #c7b895,
        -1px 8px #9c8c6c,
        0px 8px #e8dcc0,
        1px 8px #9c8c6c,
        2px 8px #c7b895;
        animation: blade-dust 0.4s steps(1) calc(var(--delay) + 0.5s) forwards;
    }