/* Camada de efeitos sobre o tabuleiro */

.fx-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    pointer-events: none;
    z-index: 30;
    overflow: visible;
    border-radius: 4px;
}

.fx-cell {
    position: relative;
    overflow: visible;
    z-index: 31;
}

/* Peça em movimento (jogada normal) */
.fx-piece-fly {
    position: absolute;
    z-index: 50;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        left 0.28s cubic-bezier(0.33, 1, 0.68, 1),
        top 0.28s cubic-bezier(0.33, 1, 0.68, 1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.fx-piece-fly .chess-piece {
    width: 100%;
    height: 100%;
}

/* Peça sendo destruída */
.fx-piece-ghost {
    position: absolute;
    inset: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    pointer-events: none;
}

.fx-piece-ghost .chess-piece {
    width: 100%;
    height: 100%;
}

.fx-piece-ghost.destroy-lava {
    animation: lavaDestroy 1.1s ease-in forwards;
}

.fx-piece-ghost.destroy-stone {
    animation: stoneCrush 0.9s ease-in forwards;
}

.fx-piece-ghost.destroy-cannon {
    animation: cannonShatter 0.85s ease-out forwards;
}

@keyframes lavaDestroy {
    0%   { transform: scale(1); filter: brightness(1); opacity: 1; }
    20%  { transform: scale(1.15) rotate(-5deg); filter: brightness(1.8) hue-rotate(-20deg); }
    50%  { transform: scale(0.9) rotate(8deg); filter: brightness(2.5) hue-rotate(-40deg); opacity: 0.9; }
    75%  { transform: scale(0.4) rotate(-15deg); filter: blur(3px) brightness(3); opacity: 0.5; }
    100% { transform: scale(0) rotate(30deg); filter: blur(8px); opacity: 0; }
}

@keyframes stoneCrush {
    0%   { transform: scale(1) translateY(0); opacity: 1; }
    30%  { transform: scale(1.1) translateY(4px); }
    55%  { transform: scale(0.7) translateY(12px) rotate(10deg); opacity: 0.8; }
    100% { transform: scale(0) translateY(20px) rotate(45deg); opacity: 0; }
}

@keyframes cannonShatter {
    0%   { transform: scale(1); opacity: 1; }
    15%  { transform: scale(1.3); filter: brightness(3); }
    40%  { transform: scale(0.6) rotate(20deg); opacity: 0.7; }
    100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* Lava */
.fx-lava-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, #ff6b00 0%, #ff2200 40%, transparent 70%);
    animation: lavaPour 1.1s ease-out forwards;
    z-index: 2;
}

.fx-lava-splash {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 120%;
    height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(255,100,0,0.9) 0%, rgba(255,0,0,0.5) 50%, transparent 70%);
    animation: lavaSplash 1s ease-out forwards;
    z-index: 3;
}

.fx-lava-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffaa00, #ff4400);
    animation: lavaBubble 0.8s ease-out forwards;
    z-index: 4;
}

@keyframes lavaPour {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    20%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; }
}

@keyframes lavaSplash {
    0%   { transform: translateX(-50%) scale(0); opacity: 1; }
    40%  { transform: translateX(-50%) scale(1.2); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1.5); opacity: 0; }
}

@keyframes lavaBubble {
    0%   { transform: translateY(0) scale(0); opacity: 1; }
    100% { transform: translateY(-30px) scale(1); opacity: 0; }
}

.fx-lava-glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,80,0,0.6) 0%, transparent 70%);
    animation: lavaGlow 1.1s ease-out forwards;
    z-index: 1;
}

@keyframes lavaGlow {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    30%, 70% { opacity: 1; transform: scale(1.2); }
}

/* Pedra pesada */
.fx-stone-rock {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(2.5rem, 8vw, 4rem);
    z-index: 10;
    animation: stoneFall 0.7s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

@keyframes stoneFall {
    0%   { top: -80%; transform: translateX(-50%) rotate(-20deg); }
    70%  { top: 20%; transform: translateX(-50%) rotate(10deg) scale(1.1); }
    100% { top: 100%; transform: translateX(-50%) rotate(0deg) scale(0.8); opacity: 0; }
}

.fx-stone-vertical {
    animation: stoneFallVertical 0.85s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
}

@keyframes stoneFallVertical {
    0%   { top: -90%; transform: translateX(-50%) rotate(-15deg) scale(0.5); opacity: 0; }
    20%  { opacity: 1; }
    65%  { top: 20%; transform: translateX(-50%) rotate(120deg) scale(1.15); }
    100% { top: 85%; transform: translateX(-50%) rotate(240deg) scale(0.75); opacity: 0; }
}

.fx-stone-horizontal {
    animation: stoneRollHorizontal 0.85s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
}

@keyframes stoneRollHorizontal {
    0%   { top: -50%; left: -40%; transform: rotate(-20deg) scale(0.5); opacity: 0; }
    20%  { opacity: 1; }
    65%  { top: 15%; left: 50%; transform: translateX(-50%) rotate(180deg) scale(1.15); }
    100% { top: 40%; left: 50%; transform: translateX(-50%) rotate(360deg) scale(0.8); opacity: 0; }
}

.fx-stone-impact {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(100,80,60,0.8) 0%, transparent 60%);
    animation: stoneImpact 0.5s ease-out forwards;
    z-index: 6;
}

@keyframes stoneImpact {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.fx-dust {
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(180,160,130,0.8);
    border-radius: 50%;
    animation: dustFly 0.8s ease-out forwards;
    z-index: 7;
}

@keyframes dustFly {
    0%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 20px)), -40px) scale(0); opacity: 0; }
}

.board-wrapper.shake-col {
    animation: colShake 0.5s ease-out;
}

.board-wrapper.shake-row {
    animation: rowShake 0.5s ease-out;
}

.board-wrapper.shake-heavy {
    animation: boardShake 0.6s ease-out;
}

@keyframes colShake {
    0%, 100% { transform: translateY(0); }
    15%      { transform: translateY(-6px); }
    30%      { transform: translateY(6px); }
    45%      { transform: translateY(-4px); }
    60%      { transform: translateY(4px); }
    75%      { transform: translateY(-2px); }
}

@keyframes rowShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
}

@keyframes boardShake {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(-4px, 2px); }
    20%      { transform: translate(4px, -2px); }
    30%      { transform: translate(-3px, -3px); }
    40%      { transform: translate(3px, 3px); }
}

/* Canhão */
.fx-missile {
    position: absolute;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    z-index: 15;
    filter: drop-shadow(0 0 6px rgba(255,100,0,0.8));
    animation: missileFly var(--fly-duration, 0.6s) ease-in forwards;
    pointer-events: none;
}

@keyframes missileFly {
    0%   { left: var(--start-x); top: var(--start-y); transform: rotate(var(--angle, 0deg)); opacity: 1; }
    100% { left: var(--end-x); top: var(--end-y); transform: rotate(var(--angle, 0deg)); opacity: 1; }
}

.fx-explosion {
    position: absolute;
    inset: -20%;
    z-index: 12;
    pointer-events: none;
}

.fx-explosion-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255,200,50,0.9);
    animation: explosionRing 0.7s ease-out forwards;
}

.fx-explosion-core {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ff8800 30%, #ff2200 60%, transparent 70%);
    animation: explosionCore 0.7s ease-out forwards;
}

.fx-explosion-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffcc00;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: sparkFly 0.6s ease-out forwards;
}

@keyframes explosionRing {
    0%   { transform: scale(0); opacity: 1; border-width: 6px; }
    100% { transform: scale(2.5); opacity: 0; border-width: 1px; }
}

@keyframes explosionCore {
    0%   { transform: scale(0); opacity: 1; }
    30%  { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes sparkFly {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); opacity: 0; }
}

.fx-smoke {
    position: absolute;
    bottom: 30%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(80,80,80,0.6), transparent);
    border-radius: 50%;
    animation: smokeRise 1s ease-out forwards;
    z-index: 8;
}

@keyframes smokeRise {
    0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0.8; }
    100% { transform: translate(calc(-50% + var(--drift, 0px)), -50px) scale(2); opacity: 0; }
}

.fx-screen-flash {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    animation: screenFlash 0.4s ease-out forwards;
    border-radius: 4px;
}

.fx-screen-flash.flash-lava   { background: rgba(255, 80, 0, 0.25); }
.fx-screen-flash.flash-stone  { background: rgba(100, 80, 60, 0.3); }
.fx-screen-flash.flash-cannon { background: rgba(255, 200, 50, 0.3); }

@keyframes screenFlash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.fx-ash {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #333;
    border-radius: 50%;
    animation: ashFall 1s ease-out forwards;
    z-index: 6;
}

@keyframes ashFall {
    0%   { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(40px) translateX(var(--ax, 10px)); opacity: 0; }
}

.square.fx-square-hit {
    animation: squareHit 0.4s ease-out;
}

@keyframes squareHit {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(2); }
}