/* =========================================================================
   css/dice-effects.css
   Three.js tek parça 3D zar host + sistem efektleri
   (Eski 6 yüzlü CSS küp / beam tasarımı kaldırıldı)
   ========================================================================= */

:root {
    /* Web + uygulama aynı oyun zar boyutu */
    --dice-hub-size: 55px;
    --dice-slot-size: 55px;
    --dice-preview-size: 110px; /* merkez/kale ile aynı */
    --dice-grid-size: 40px;
}

.dice-slot {
    width: var(--dice-slot-size);
    height: var(--dice-slot-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 5;
    pointer-events: auto;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#dice-hub {
    font-size: var(--dice-hub-size);
    width: var(--dice-hub-size) !important;
    height: var(--dice-hub-size) !important;
    min-width: var(--dice-hub-size);
    min-height: var(--dice-hub-size);
    border-radius: 0 !important;
    display: block;
    cursor: pointer;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 !important;
    z-index: 950;
    pointer-events: auto;
    --dice-size: var(--dice-hub-size);
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* 🖐 O4 — ZAR BASIŞ GERİ BİLDİRİMİ
   Zara dokunulduğunda anında bir tepki yoktu; yavaş cihazda zar dönmeye
   başlayana kadar dokunuşun algılanıp algılanmadığı belirsizdi.
   `.rolling` sırasında devre dışı (aşağıdaki kural transform'u sıfırlıyor). */
#dice-hub:active:not(.rolling) { transform: scale(.90); }
#dice-hub { transition: transform .12s ease; }

#dice-hub.rolling {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

#dice,
#dice.dice-three-host,
#preview-dice-hub.dice-three-host,
.dice-three-host[class*="dice-type-"] {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    /* Firebase .dice-type-* beyaz kare arka planını ez */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto;
    box-sizing: border-box;
    color: transparent !important;
}

#dice.dice-three-host .kzl-three-dice-canvas,
#preview-dice-hub.dice-three-host .kzl-three-dice-canvas,
.dice-grid-three-host .kzl-three-dice-canvas,
.dice-three-host .kzl-three-dice-canvas {
    display: block;
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Mağaza üst önizleme: merkez/kale ile aynı 110×110 küçük obje */
#preview-dice-hub,
#preview-dice-hub.dice-three-host {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    font-size: 0 !important;
    margin: 0 auto !important;
    flex: 0 0 110px !important;
    box-sizing: border-box !important;
}

#shared-dice-preview .preview-container {
    overflow: visible !important;
}

/* Mağaza grid: üstteki ile aynı Three.js zar */
.dice-grid-3d-wrap {
    width: var(--dice-grid-size);
    height: var(--dice-grid-size);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent !important;
}
.dice-grid-three-host,
.dice-grid-three-host.dice-three-host {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
}
.dice-grid-three-host .kzl-three-dice-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.shake-active { animation:panel-shake .35s ease-in-out; }
@keyframes panel-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

/* --- Sistem ve Merhamet Efektleri --- */
.mercy-glow { animation: mercyPulse 1.2s infinite alternate !important; }
@keyframes mercyPulse { 0% { box-shadow: 0 0 15px #facb15, inset 0 0 10px rgba(250, 203, 21, 0.5) !important; border-color: #facb15 !important; } 100% { box-shadow: 0 0 35px #facb15, inset 0 0 20px #facb15 !important; border-color: #fff !important; transform: scale(1.05); } }

.edu-warning-text { color: var(--orange); font-size: 11px; font-weight: 800; animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: 0 1px 2px rgba(0,0,0,0.2); margin-top: 4px; display: block; }
.game-event-text .edu-warning-text { display: inline; margin-top: 0; font-size: inherit; }

/* --- 6 atma efektleri (3D): CSS #dice-hub / .dice-fx-target üzerinde; Three host'a transform yok --- */
.dice-fx-target {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    width: fit-content;
    height: fit-content;
    /* margin-inline:auto flex kardeşte (merkez/kale) sağa kaydırıyordu — parent justify-content:center yeter */
    margin-inline: 0;
}

/* Bulanık: yumuşak saydam kenar maskesi + canvas blur */
.effect-blur .dice-three-host,
#dice-hub.effect-blur > .dice-three-host,
#dice-hub.effect-blur > #dice,
#preview-dice-fx.effect-blur > .dice-three-host,
#preview-dice-fx.effect-blur > #preview-dice-hub {
    overflow: hidden !important;
    border-radius: 22% !important;
    /* Sert clip yerine kenarlara doğru saydam fade */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
}
.effect-blur .dice-three-host .kzl-three-dice-canvas,
#dice-hub.effect-blur .kzl-three-dice-canvas,
#preview-dice-fx.effect-blur .kzl-three-dice-canvas {
    will-change: filter;
    animation: efBlur 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}
@keyframes efBlur {
    0%   { filter: blur(0); }
    18%  { filter: blur(2px); }
    42%  { filter: blur(6px); }
    68%  { filter: blur(3px); }
    100% { filter: blur(0); }
}

/* rainbow: renk döngüsü Three.js gövde material'ında (R→Y→G→B→skin) */
.effect-rainbow { /* class lifecycle / timeout */ }

.effect-tremor { animation: efTremor 1.5s ease-in-out forwards; }
@keyframes efTremor {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    8%  { transform: translate(-4px, 2px) rotate(-2deg); }
    16% { transform: translate(4px, -3px) rotate(2deg); }
    24% { transform: translate(-3px, -2px) rotate(-1.5deg); }
    32% { transform: translate(3px, 3px) rotate(1.5deg); }
    40% { transform: translate(-4px, 1px) rotate(-2deg); }
    48% { transform: translate(4px, -2px) rotate(2deg); }
    56% { transform: translate(-2px, 3px) rotate(-1deg); }
    64% { transform: translate(3px, -1px) rotate(1deg); }
    72% { transform: translate(-3px, -2px) rotate(-1.5deg); }
    80% { transform: translate(2px, 2px) rotate(1deg); }
    88% { transform: translate(-1px, -1px) rotate(-0.5deg); }
    96% { transform: translate(1px, 0) rotate(0.3deg); }
}

/* Dalga: zar çerçevesinden dışarı taşan köşeli halkalar (halka zarın arkasında başlar) */
.effect-ripple,
#dice-hub.effect-ripple {
    position: relative;
    overflow: visible !important;
}

.effect-ripple > .dice-three-host,
.effect-ripple > #dice,
.effect-ripple > #preview-dice-hub,
#dice-hub.effect-ripple > .dice-three-host,
#dice-hub.effect-ripple > #dice {
    position: relative;
    z-index: 2;
}

.effect-ripple::before,
.effect-ripple::after,
#dice-hub.effect-ripple::before,
#dice-hub.effect-ripple::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* Görünür zar gövdesine yakın — çerçeve boyutu */
    width: calc(var(--dice-hub-size, 60px) * 0.69);
    height: calc(var(--dice-hub-size, 60px) * 0.69);
    border-radius: 22%;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
    border: 5px solid color-mix(in srgb, var(--fx-ripple, #c3c3c3) 92%, white 8%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--fx-ripple, #c3c3c3) 55%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    animation: efRippleRing 1.5s ease-out forwards;
}

#preview-dice-fx.effect-ripple::before,
#preview-dice-fx.effect-ripple::after {
    width: calc(var(--dice-preview-size, 110px) * 0.69);
    height: calc(var(--dice-preview-size, 110px) * 0.69);
    border-radius: 22%;
}

.effect-ripple::after,
#dice-hub.effect-ripple::after {
    border-color: color-mix(in srgb, var(--fx-ripple, #c3c3c3) 75%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--fx-ripple, #c3c3c3) 40%, transparent);
    animation-delay: 0.26s;
}

@keyframes efRippleRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.42);
        opacity: 0;
    }
}

/* Aura: zar kenarı 0 0 glow + hafif çevir/ölçek nabzı (renk host'taki --fx-aura) */
.effect-aura > .dice-three-host,
.effect-aura > #dice,
.effect-aura > #preview-dice-hub,
#dice-hub.effect-aura > .dice-three-host,
#dice-hub.effect-aura > #dice,
#preview-dice-fx.effect-aura > .dice-three-host,
#preview-dice-fx.effect-aura > #preview-dice-hub {
    transform-origin: center center;
    will-change: transform, filter;
    animation: efAura 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes efAura {
    0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        transform: rotate(10deg) scale(1.1);
        filter:
            drop-shadow(0 0 14px var(--fx-aura, #c3c3c3))
            drop-shadow(0 0 8px var(--fx-aura, #c3c3c3));
    }
    100% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
}

/* Web ve mobil aynı zar boyutu: 55px (--dice-hub-size) */

body.kzl-game-performance .mercy-glow {
    animation: none !important;
    box-shadow: 0 0 12px #facb15 !important;
}

/* Performans: WebGL canvas üzerinde CSS blur/drop-shadow compositor maliyetini kes */
body.kzl-game-performance .effect-blur .kzl-three-dice-canvas,
body.kzl-game-performance #dice-hub.effect-blur .kzl-three-dice-canvas,
body.kzl-game-performance #preview-dice-fx.effect-blur .kzl-three-dice-canvas {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
    opacity: 0.72;
    transition: opacity 0.35s ease;
}
body.kzl-game-performance .effect-aura > .dice-three-host,
body.kzl-game-performance .effect-aura > #dice,
body.kzl-game-performance #dice-hub.effect-aura > .dice-three-host,
body.kzl-game-performance #dice-hub.effect-aura > #dice {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
    transform: none !important;
}
/* Native: altı efekti tamamen sade (WebGL canvas filter yok) */
html.kzl-native body.kzl-game-performance #dice-hub.effect-blur,
html.kzl-native body.kzl-game-performance #dice-hub.effect-aura,
html.kzl-native body.kzl-game-performance #dice-hub.effect-ripple {
    animation: none !important;
}
html.kzl-native body.kzl-game-performance #dice-hub.effect-ripple::before,
html.kzl-native body.kzl-game-performance #dice-hub.effect-ripple::after {
    display: none !important;
}
body.kzl-game-performance .effect-ripple::before,
body.kzl-game-performance .effect-ripple::after,
body.kzl-game-performance #dice-hub.effect-ripple::before,
body.kzl-game-performance #dice-hub.effect-ripple::after {
    box-shadow: none !important;
    border-width: 3px !important;
}

/* ⚡ AĞ BEKLEMESİ — zar sunucudan gelene kadar anında görsel geri bildirim.
   Çevrimiçi zar sunucu otoriteli; dokunuş ile animasyon arasındaki ağ
   gidiş-dönüşünde ekran ölü kalmasın diye zar hafifçe titrer. Gerçek zar
   animasyonu başlayınca (.rolling) bu sınıf kaldırılır. */
#dice-hub.net-pending {
    animation: kzl-dice-net-pending .55s ease-in-out infinite !important;
    will-change: transform;
}
@keyframes kzl-dice-net-pending {
    0%   { transform: rotate(0deg)   scale(1); }
    25%  { transform: rotate(-7deg)  scale(.97); }
    50%  { transform: rotate(0deg)   scale(1); }
    75%  { transform: rotate(7deg)   scale(.97); }
    100% { transform: rotate(0deg)   scale(1); }
}
/* Gerçek atış başladıysa bekleme animasyonu asla üste binmesin. */
#dice-hub.rolling.net-pending {
    animation: none !important;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
    #dice-hub.net-pending { animation: none !important; opacity: .65; }
}