/* Anime Wordle FX — shared/fx.js ile birlikte kullanılan efekt stilleri. */

.awfx-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* Ortam sakurası içeriğin arkasında süzülür (reklam/modal üstüne binmez). */
.awfx-canvas--ambient { z-index: -1; }

/* Kısa ömürlü kutlama patlamaları modallerin üstünde oynar. */
.awfx-canvas--fx { z-index: 9000; }

/* --- Sallama ------------------------------------------------------- */

@keyframes fx-shake-soft {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes fx-shake-hard {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15% { transform: translateX(-7px) rotate(-0.6deg); }
    35% { transform: translateX(7px) rotate(0.6deg); }
    55% { transform: translateX(-5px) rotate(-0.4deg); }
    75% { transform: translateX(4px) rotate(0.3deg); }
}

.fx-shake-soft { animation: fx-shake-soft 0.4s ease both; }
.fx-shake-hard { animation: fx-shake-hard 0.45s ease both; }

/* --- Pop / vurgu ---------------------------------------------------- */

@keyframes fx-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.fx-pop { animation: fx-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes fx-glow {
    0% { box-shadow: 0 0 0 0 var(--fx-glow-color, rgba(91, 164, 212, 0.8)); }
    60% { box-shadow: 0 0 18px 7px var(--fx-glow-color, rgba(91, 164, 212, 0.8)); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.fx-glow { animation: fx-glow 0.85s ease-out both; }

/* --- Kilidi açılan ipucu butonu ------------------------------------ */

@keyframes fx-hint-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 216, 106, 0); }
    30% { box-shadow: 0 0 16px 5px rgba(245, 216, 106, 0.75); }
    65% { box-shadow: 0 0 8px 3px rgba(245, 216, 106, 0.45); }
}

.fx-hint-ready { animation: fx-hint-ready 1.6s ease-out 2; }

/* --- Kazanan satır parlaması ---------------------------------------- */

@keyframes fx-win-sweep {
    0% { transform: translateX(-130%) skewX(-18deg); opacity: 1; }
    99% { transform: translateX(230%) skewX(-18deg); opacity: 1; }
    /* Bitişte satır içine, görünmez konuma park et: taşma/kaydırma bırakma. */
    100% { transform: translateX(0) skewX(-18deg); opacity: 0; }
}

.fx-win-row { position: relative; overflow: hidden; }
.fx-win-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    opacity: 0;
    animation: fx-win-sweep 1.1s ease-out 0.15s 2 both;
    pointer-events: none;
}

/* Tablo satırlarında overflow/pseudo güvenilmez: hücre parlaması kullan. */
@keyframes fx-win-cells {
    0%, 100% { filter: brightness(1); }
    45% { filter: brightness(1.45); }
}

tr.fx-win-row::after { content: none; }
tr.fx-win-row > td { animation: fx-win-cells 1.1s ease-out 0.15s 2 both; }

/* --- Yükselen etiket ------------------------------------------------- */

@keyframes fx-float-up {
    0% { opacity: 0; transform: translate(-50%, 4px) scale(0.85); }
    18% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

.fx-float-label {
    position: fixed;
    z-index: 9100;
    transform: translate(-50%, 0);
    font-size: 1.15rem;
    font-weight: 700;
    color: #F5D86A;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    white-space: nowrap;
    animation: fx-float-up 1.3s ease-out both;
}

/* --- Anime ışınları (kutlama modalı arkası) -------------------------- */

@keyframes fx-rays-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.fx-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        rgba(245, 216, 106, 0.16) 0deg 8deg,
        rgba(245, 216, 106, 0) 8deg 20deg
    );
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, transparent 62%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, transparent 62%);
    animation: fx-rays-spin 26s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.modal-overlay:has(> .fx-rays) { overflow: hidden; }

/* Işın katmanı overlay'in ilk çocuğu olur; içerik üstte kalmalı. */
.modal-overlay > .modal-content { position: relative; z-index: 1; }

/* --- Azaltılmış hareket --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fx-shake-soft,
    .fx-shake-hard,
    .fx-pop,
    .fx-glow,
    .fx-hint-ready,
    .fx-float-label,
    .fx-rays,
    .fx-win-row::after,
    tr.fx-win-row > td {
        animation: none !important;
    }
    .fx-win-row::after { content: none !important; }
    .fx-rays { display: none; }
    .awfx-canvas { display: none; }
}