/* =========================================================================
   css/dice-effects.css
   Zarların fiziksel görünümü, kozmetikleri, atma animasyonları ve efektler
   ========================================================================= */

/* --- Ana Zar Mekaniği & Konteynerleri --- */
.dice-slot { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; margin:0; z-index:5; pointer-events:auto; }
#dice-hub { width:48px!important; height:48px!important; min-width:48px; min-height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s; position:relative; z-index:950; pointer-events:auto; }
#dice-hub:active { transform:scale(.92); }
#dice { width:100%; height:100%; border-radius:10px; position:relative; box-sizing:border-box; box-shadow:0 6px 15px rgba(0,0,0,.2),inset 0 3px 8px rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.15); transition:all .3s; pointer-events:auto; }
.dot { border-radius:50%; width:7px; height:7px; position:absolute; transform:translate(-50%,-50%); box-shadow:inset 0 2px 4px rgba(0,0,0,.3); transition:all .3s; }

/* --- Zar Atış Animasyonları --- */
.rolling { animation:dice-shake .39s ease-in-out infinite; will-change: transform; }
@keyframes dice-shake { 0%,100%{transform:rotate(-12deg) scale(.95)} 50%{transform:rotate(12deg) scale(1.05)} }

.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)} }

/* --- Zar Temaları (Kozmetikler) --- */
.dice-type-classic { background: var(--apple-blue) !important; border-radius: 14px !important; box-shadow: 0 6px 15px rgba(0,0,0,.2), inset 0 3px 8px rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.15) !important; color: var(--apple-blue) !important; }
.dice-type-classic .dot { background: #fff !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.3) !important; }

#dice.dice-type-minimal, #preview-dice-hub.dice-type-minimal, .dice-grid-btn .dice-type-minimal { background:currentColor!important; border-radius:8px!important; box-shadow:0 4px 12px rgba(0,0,0,.15); border:none!important; }
.dice-type-minimal .dot { background:#fff!important; width:6px!important; height:6px!important; box-shadow:none!important; opacity:.9; }

#dice.dice-type-neon, #preview-dice-hub.dice-type-neon, .dice-grid-btn .dice-type-neon { background:transparent!important; border:2px solid currentColor; box-shadow:0 0 15px currentColor,inset 0 0 10px currentColor; }
.dice-type-neon .dot { background:currentColor!important; box-shadow:0 0 6px currentColor!important; }

#dice.dice-type-glass, #preview-dice-hub.dice-type-glass, .dice-grid-btn .dice-type-glass { background:linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)!important; border-radius:20px!important; box-shadow:0 8px 25px rgba(161,196,253,.5); border:2px solid #fff!important; }
.dice-type-glass .dot { background:#fff!important; box-shadow:0 0 8px rgba(255,255,255,.8),inset 0 1px 2px rgba(0,0,0,.1)!important; width:7px!important; height:7px!important; border-radius:50%!important; }

#dice.dice-type-sharp, #preview-dice-hub.dice-type-sharp, .dice-grid-btn .dice-type-sharp { background:linear-gradient(145deg,#bdc3c7,#fff)!important; border-radius:12px!important; border:1px solid #a1a1a6!important; box-shadow:inset 0 2px 5px rgba(255,255,255,.8),0 5px 15px rgba(0,0,0,.15); }
.dice-type-sharp .dot { background:#1d1d1f!important; border-radius:50%!important; box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 1px 1px rgba(255,255,255,.3)!important; width:6px!important; height:6px!important; }

#dice.dice-type-inverted, #preview-dice-hub.dice-type-inverted, .dice-grid-btn .dice-type-inverted { background:#1c1c1e!important; border:2px solid currentColor; box-shadow:none; }
.dice-type-inverted .dot { background:currentColor!important; }

#dice.dice-type-hologram, #preview-dice-hub.dice-type-hologram, .dice-grid-btn .dice-type-hologram { background:rgba(0,255,255,.05)!important; border:1px solid #0ff; box-shadow:0 0 15px #0ff,inset 0 0 15px #0ff; }
.dice-type-hologram .dot { background:#f0f!important; box-shadow:0 0 6px #f0f!important; }

#dice.dice-type-retro, #preview-dice-hub.dice-type-retro, .dice-grid-btn .dice-type-retro { border-radius:0!important; border:3px solid currentColor; background:#fff!important; box-shadow:none; }
.dice-type-retro .dot { border-radius:0!important; width:7px!important; height:7px!important; background:currentColor!important; box-shadow:none!important; }

#dice.dice-type-gold, #preview-dice-hub.dice-type-gold, .dice-grid-btn .dice-type-gold { background:linear-gradient(135deg,#ffd700,#daa520)!important; border:1px solid rgba(255,255,255,.5); box-shadow:0 6px 15px rgba(218,165,32,.4),inset 0 2px 5px rgba(255,255,255,.6); }
.dice-type-gold .dot { background:#fff!important; box-shadow:inset 0 1px 3px rgba(0,0,0,.2)!important; }

/* --- 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; }

/* --- Güç (Skill) Efektleri --- */
.effect-pulse { animation:efPulse 1.3s ease-in-out forwards; }
@keyframes efPulse { 0%,28%,70%{transform:scale(1);box-shadow:0 0 0 currentColor} 14%,42%{transform:scale(1.1);box-shadow:0 0 30px currentColor} }

.effect-aura { animation:efAura 1.3s ease-in-out forwards; }
@keyframes efAura { 0%,100%{box-shadow:0 0 0 transparent} 50%{transform:scale(1.1);box-shadow:0 0 45px currentColor} }

.effect-ripple { animation:efRipple 1.3s ease-out forwards; }
@keyframes efRipple { 0%{box-shadow:0 0 0 0 currentColor} 100%{box-shadow:0 0 0 40px transparent} }

.effect-flash { animation:efFlash 1.3s ease-out forwards; }
@keyframes efFlash { 0%,40%,80%,100%{box-shadow:0 0 0 transparent} 20%,60%{box-shadow:0 0 50px #fff,0 0 80px currentColor;transform:scale(1.1)} }

.effect-rainbow { animation:efRainbow 1.3s linear forwards; }
@keyframes efRainbow { 0%{box-shadow:0 0 35px currentColor;filter:hue-rotate(0deg);transform:scale(1.1)} 100%{box-shadow:0 0 35px currentColor;filter:hue-rotate(360deg);transform:scale(1)} }

.effect-fire { animation:efFire 1.3s ease-in-out forwards; }
@keyframes efFire { 0%,100%{box-shadow:0 0 20px currentColor;transform:translateY(0) scale(1)} 25%{box-shadow:0 -15px 30px currentColor;transform:translateY(-3px) scale(1.05)} 50%{box-shadow:0 -5px 40px currentColor;transform:translateY(0) scale(1.1)} 75%{box-shadow:0 -20px 25px currentColor;transform:translateY(-4px) scale(1.05)} }

.effect-spin { animation:efSpin 1.3s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes efSpin { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(360deg) scale(1.2);box-shadow:0 0 30px currentColor} 100%{transform:rotate(720deg) scale(1)} }

.effect-phantom { animation:efPhantom 1.3s ease-out forwards; }
@keyframes efPhantom { 0%{transform:scale(1);opacity:1;box-shadow:0 0 0 currentColor} 50%{transform:scale(1.3);opacity:.3;box-shadow:0 0 40px currentColor,0 0 80px currentColor} 100%{transform:scale(1);opacity:1;box-shadow:0 0 0 transparent} }

/* Mobil Zar Boyutlandırması */
@media(max-width:480px){
    .dice-slot { width:36px; height:36px; }
    #dice-hub { width:36px!important; height:36px!important; min-width:36px; min-height:36px; border-radius:8px; }
    #dice { padding:4px; border-radius:8px; }
    .dot { width:5px; height:5px; }