@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');

:root { font-family: 'Outfit', sans-serif; }
body { background-color: #050505; background-image: radial-gradient(circle at 50% 0%, #1a1025 0%, #050505 70%); }

.glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass-button { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37); }
.glass-button:hover:not(:disabled) { background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); border: 1px solid rgba(255, 255, 255, 0.3); }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px;}
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

@keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } }
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }

/* --- PREMIUM YENİ 3D COIN TASARIMI --- */
.coin-container {
    width: 130px;
    height: 130px;
    perspective: 1200px;
    margin: 0 auto 2.5rem auto;
    filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5));
}

.coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center;
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    /* Kalın çizgi yerine zarif ince cam çizgisi eklendi */
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 0 20px rgba(255,255,255,0.15), 0 10px 30px rgba(0,0,0,0.6);
}

.coin-heads {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.95), rgba(161, 98, 7, 0.95));
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.coin-tails {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(29, 78, 216, 0.95));
    color: #fff;
    transform: rotateY(180deg);
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.spin-heads { animation: flipHeads 3s cubic-bezier(0.3, 1, 0.7, 1) forwards; }
.spin-tails { animation: flipTails 3s cubic-bezier(0.3, 1, 0.7, 1) forwards; }

@keyframes flipHeads {
    0% { transform: translateY(0) rotateY(0); }
    50% { transform: translateY(-100px) rotateY(1800deg); }
    100% { transform: translateY(0) rotateY(3600deg); }
}
@keyframes flipTails {
    0% { transform: translateY(0) rotateY(0); }
    50% { transform: translateY(-100px) rotateY(1980deg); }
    100% { transform: translateY(0) rotateY(3780deg); }
}

/* --- DİĞERLERİ --- */
.transform-style-3d { transform-style: preserve-3d; perspective: 1000px; }
.anim-roll { animation: roll-dice 0.6s ease-in-out; }
@keyframes roll-dice { 0% { transform: rotateX(0) rotateY(0) scale(1); } 50% { transform: rotateX(360deg) rotateY(360deg) scale(1.2); } 100% { transform: rotateX(720deg) rotateY(720deg) scale(1); } }

.toast-enter { animation: slideInRight 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes slideInRight { from { transform: translateX(100%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
.voice-active-glow { box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.6); border-color: #22c55e; transition: all 0.1s ease; }

.floating-emoji { position: fixed; bottom: 80px; font-size: 2.5rem; pointer-events: none; z-index: 100; animation: floatUp 2.5s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { transform: translateY(-50px) scale(1.2); opacity: 1; } 80% { transform: translateY(-200px) scale(1); opacity: 1; } 100% { transform: translateY(-300px) scale(0.8); opacity: 0; } }

.emoji-cooldown { opacity: 0.3; filter: grayscale(100%); transition: all 0.2s; }
.xox-cell { width: 80px; height: 80px; background: rgba(0,0,0,0.4); border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 3rem; font-weight: bold; cursor: pointer; transition: background 0.2s; }
.xox-cell:hover { background: rgba(255,255,255,0.1); }
.xox-x { color: #a855f7; text-shadow: 0 0 15px rgba(168,85,247,0.5); }
.xox-o { color: #3b82f6; text-shadow: 0 0 15px rgba(59,130,246,0.5); }